1、 单向数据流
父->子
- props接受普通数据类型时:父组件数据影响子组件,子组件的数据改变不会影响父组件
- props接受对象或数组这种引用数据类型:子组件直接改变props接受值,是会改变父组件里面的数据的,因为传递过来的时引用的地址而不是单纯的拷贝
注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
-
子级直接修改父级传过来的引用地址是不被允许的(直接赋值)
-
修改某一项数据是可行的,但不建议这么做
<script>
Vue.component('MyComA', {
// 通过props接收数据a
props: ['chidren'],
template: `
<div>
父子通信---{{ chidren }}
<p><button @click='fn'>点击改变</button></p>
</div>`,
methods: {
fn() {
// 子级直接修改父级传过来的引用地址是不被允许的(直接赋值)
// this.chidren = 3;
// 修改某一项数据是可行的,但不建议这么做
this.chidren[0] = 100;
console.log(this.chidren)
}
}
})
new Vue({
el: '#app',
// 传递数据a:
data: {
// parent: {
// a: 'MyComA'
// }
parent: [1, 2, 3, 4]
}
})
</script>
2、props数据验证
- 类型验证type type:[Number,String]/Sting
- 必填required required:true
- 默认值default default:data 如果设置的默认值时引用类型(数组或者对象)那么data要是函数的返回值
官方代码:
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})