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: `
            

                son: {{ count }}
            
        `
    });
    const vm = new Vue({
        el: '#app',
        data: {
            count: 0
        }
    });
</script>

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

Vue.component('my-count',{
    props: {
        count: Number
    },
    template: `
        

            son: {{ count }}
            增加
        
    `
});

此时点击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: `
            

                son: {{ myCount }}
                son增加
            
        `
    });
    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: `
            

                son: {{ myArray }}
                son增加
            
        `
    });
    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()   //转换小写
  }
}