场景 共用组件的使用 只使用一部分 还需要有自己的
在App组件中
<template>
<div class="container">
//name,sex,age传的属性
<Student name="小鸡炖蘑菇" sex="好" :age='18'></Student>
</div>
</template>
<script>
// 引入组件 汇总所有需要的组件 这个是模块化的引入
// import School from "./components/School";
import Student from './components/Student.vue';
export default {
name: "App",
data() {
return {
msg:'哈IIEUJI我欧文1'
};
},
// 注册组件
components: {
Student
},
methods:{
}
};
</script>
<style scoped lang="scss">
</style>
在子组件student中
<template>
<div class="container">
<h1>{{ msg }}</h1>
<h2>学生姓名:{{ name }}</h2>
<h2>学生性别:{{ sex }}</h2>
<h2>学校年龄:{{ myAge+1 }}</h2>
<button @click="updateAge">尝试修改外部传来的属性</button>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
msg:"道道道 天下道",
myAge:this.age
};
},
methods:{
updateAge(){
this.myAge++
}
},
// 此时的外部传进来的不允许修改 要想修改需要新配置 (传进来的属性不要和vue用过的属性名重复 避免冲突) 先准备好接收的 再配置数据
props:['name','age','sex'],
// 限制类型
// props:{name:String,age:Number,sex:String}
// 丰富写法
props:{
name:{
type:String,//name的类型是字符串
required:true,//required是必要的
default:99//默认值
},
age:{
type:Number,//
default:99
},
sex:{
type:String,
require:true
}
}
};
</script>
<style scoped >
</style>
配置项 props
功能：让组件接收外部传过来的数据
1 传递数据
2 接收数据:
第一种方式(只接收)
props:[‘name’]
第二种方式(限制类型)
props:{
name:Number
}
第三种方式(限制类型。限制必要性。指定默认值):
props:{
name:{
type:String,//类型
required:true,//必要性
default:‘老王’,//默认值
}
}
备注:props是只读的,Vue底层会检测你对props的修改 如果进行了修改 就会发出警告
若业务需求确实需要修改 那么请复制props的内容到data中一份 然后去修改data中的数据
