<div id="app">
<child :m="msg"></child>
</div>
<script>
//child是vm的一个子组件
//template:只能获取当前实例(例如:child)data或methods中的属性
//组件之间数据传递
//vue中的数据传递是单向的
//1.父传子 2.子传父(发布订阅) 3.兄弟之间传递
//如何让子组件获取到父组件的数据?
// let obj = {a}
// console.log(obj)
//1.把父组件的数据以动态属性的方式写在子组件的行间属性上
//2.在子组件中用props这个属性接收,属性值是(对象、数组)
//3.在子组件中使用动态的属性名保持一致
let child = {
data() {
return {num: 100}
},
// props:["m"],//props中放的是动态属性的属性名
props: {
m:{
// type:Number //type:对传递过来的数据进行验证,
type:[Number,String],//如果想要多个选择就用数组
required:true,//如果是true就代表m是必须在行间传递的属性
default:200,//这是一个默认值。当不传属性时,下面template中的m就是200
validator(val){//验证
console.log(val);//代表m传过来的属性值,即vm里面的数据
//这个函数返回一个布尔值,如果是true,没有问题,如果是false,那么会抛出异常
return [1,233,4].indexOf(val)
}
}
},
template: '<div>{{m}}</div>'//和props对应
}
let vm = new Vue({
el: "#app",
data: {
msg: "fuyan",
val: 1
},
components: {
child
}
})
console.log(vm.$options.components)
</script>
vue中的props(父传子数据)
最新推荐文章于 2022-10-30 22:58:13 发布