Vue学习—单向数据绑定

一、单向数据绑定

<div id="app">
    father: {
    
    {
    
     count }}
    <button @click='count ++'>增加</button>
    <my-count :count="count"></my-count>
</div>
<script>
    Vue.component('my-count',{
    
    
        props: {
    
    
            count: Number
        },
        template: `
            <div>
                son: {
     
     { count }}
            </div>
        `
    });
    const vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
            count: 0
        }
    });
</script>

此时点击father后父子同时改变（父级 prop 的更新会向下流动到子组件中）

Vue.component('my-count',{
    
    
    props: {
    
    
        count: Number
    },
    template: `
        <div>
            son: {
     
     { count }}
            <button @click='count ++'>增加</button>
        </div>
    `
});

此时点击son，只有儿子变化（但是反过来则不行）

再点击father，son的值变与father一致

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
一旦父子公用的数据为引用值时，那么父子的值又会变得同步

1. 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用，在后续操作中，会将这个值进行改变。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：

props: ['initialCounter'],
data: function () {
    
    
  return {
    
    
    counter: this.initialCounter
  }
}

<div id="app">
    {
   
   { count }}
    <my-count :count='count'></my-count>
</div>
<script>
    Vue.component('my-count',{
     
     
        props: {
     
     
            count: Number
        },
        data(){
     
     
            return {
     
     
                myCount: this.count
            }
        },
        template: `
            <div>
                son: {
      
      { myCount }}
                <button @click='myCount ++'>son增加</button>
            </div>
        `
    });
    const vm = new Vue({
     
     
        el: '#app',
        data: {
     
     
            count: 0
        }
    });
</script>

<div id="app">
    father: {
   
   { array }}
    <button @click='array.push(4)'>father增加</button>
    <my-array :array="array"></my-array>
</div>
<script>
    Vue.component('my-array',{
     
     
        props: {
     
     
            array: Array
        },
        data(){
     
     
            return {
     
     
                myArray: [...this.array]  //深度克隆即可
            }
        },
        template: `
            <div>
                son: {
      
      { myArray }}
                <button @click='myArray.push(4)'>son增加</button>
            </div>
        `
    });
    const vm = new Vue({
     
     
        el: '#app',
        data: {
     
     
            count: 0,
            array: [1,2,3]
        }
    });
</script>

2. 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

props: ['size'],
computed: {
    
    
  normalizedSize: function () {
    
    
    return this.size.trim().toLowerCase()   //转换小写
  }
}