欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue.js组件之间的父子(向下)传值

程序员文章站 2022-05-24 13:23:49
...

传值的几种方式

  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 ++;
            }
        }
    })

流程图

vue.js组件之间的父子(向下)传值

注意事项:

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