vue.js组件之间的父子（向下）传值

传值的几种方式

1. 父子(向下)传值：通过属性
2. 子父（向上）传值：通过自定义事件
3. 非父子传值：通过bus.（非父子传值的其中一种方式）

父子(向下)传值 教程

初始代码：

/*-----------------------html---------------------------------*/

    <input type="button" @click="fn" :value="n">
    <one></one>
    

/*-----------------------js---------------------------------*/
    new Vue({
        el:"#root",
        data:{
            n:1
        },
        components:{
            one:{
                template:`<div>one {{abc}}</div>`
            }
        },
        methods:{
            fn(){
                this.n ++;
            }
        }
    }) //现在是这个功能：我点击 button 按钮，n 就 + 1

现在我想在 one 当中使用外围的这个数据 n

• 我这个 one 组件是我实例的一个子组件（你在什么地方声明的，那么我的这个组件就属于谁的子组件）
• 如果你在子组件的模板里面直接打出这个 n ，出不来
• 因为咱们实例之间还有组件之间它的这些数据是不共享的
• 你如果想要使用，必须要经过允许

开始使用属性传递

/*-----------------------html---------------------------------*/

    <input type="button" @click="fn" :value="n">
    <one :abc="n"></one>   //在这里传递 abc 的参数是 n 
    

现在我使用这个 one 属性传值，这时就需要有地方接受这个参数

/*-----------------------js---------------------------------*/

    new Vue({
        el:"#root",
        data:{
            n:1
        },
        components:{
            one:{
                props:["abc"],   // 通过props可以限制接收的数据。
                template:`<div>one {{abc}}</div>`
            }
        },
        methods:{
            fn(){
                this.n ++;
            }
        }
    })

流程图

注意事项：

1. 传递的属性不能出现大写。需要用-分割。大写转为小写
   • 例：:userName = “n” 不能这样写，要写成 :user-name = “n”
2. 从父级接收过来的数据是不允许直接修改。
3. 接收过来的属性名，不允许与当前组件的数据名（data属性名）相同