props的注意事项
作用：props是用于Vue中父组件向子组件传值的时候使用。
- props的传递是单向的。
- 不要在子组件改变props的值。
1、props是单项传递
父组件值的会改变子组件的值，子组件的值改变不会影响父组件，如下:
//语法说明
<div id="app">
<input type="text" v-model='value'/>
父组件的值:{{ value }}
<my-component :value='value'></my-component>
</div>
//这里注册了一个全局组件
Vue.component('my-component',{
props:['value'],
template:`<div>
子组件的值:{{ value }}
<button @click='clickMe'>修改子组件的值</button>
</div>`,
methods:{
clickMe(){
this.value = 123;
}
}
})
//初始化Vue对象
var vm = new Vue({
el: '#app',
data:{
value:'请输入内容'
}
})
-
可以看到在输入框我们输入的值，同时子组件的值也改变了。
- 在我们点击按钮修改props的值时，子组件的值被修改，但父组件的值没有修改,并且控制台报错，要求我们不要尝试修改props的值。
2、不要在子组件改变props的值。
上个例子也看到，直接在子组件改变props的值Vue会报错。因为Vue推荐props适用于两种情况。
- 总是根据父组件的值进行变化。
- 作为子组件data属性的初始值。
// 接收父组件的Value值，并将props的值赋予子组件的childValue当初始值。
// 通过改变childValue来实现效果
Vue.component('my-component',{
props:['value'],
template:`<div>子组件的值：{{ childValue }}<br/><button @click='clickMe'>修改子组件的值</button></div>`,
data(){
return{
childValue: this.value
}
},
methods:{
clickMe(){
this.childValue = 123;
}
}
})
3.注意
值得注意的是，当我在想通过输入框来改变props的值，childValue的值并没有跟着修改，符合初始值的定义。推测，可能
childvalue：this.value采用的是值传递。
