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 采用的是值传递。