史上最详细的vue父子组件传参、传函数
首先要知道谁是父组件谁是子组件,这个概念分不清的话还这么传:子组件:自己写的组件,供其他页面调用父组件:自己写的组件被页面调用到了,页面内调用的组件就是父组件如果不够清晰,看图:一、父子组件传参数是通过属性props来实现的,需要在子组件内定义一个属性来接收父组件传过来的值;父组件要做的是双向绑定一个参数、给参数赋值。实例:先上图子组件:1.要用brainstormData属性,此时属性是没有值的
首先要知道谁是父组件谁是子组件,这个概念分不清的话还这么传:
子组件:自己写的组件,供其他页面调用
父组件:自己写的组件被页面调用到了,页面内调用的组件就是父组件
如果不够清晰,看图:
一、父子组件传参数是通过属性props来实现的,需要在子组件内定义一个属性来接收父组件传过来的值;父组件要做的是双向绑定一个参数、给参数赋值。实例:
先上图
子组件:
1.要用brainstormData属性,此时属性是没有值的,父组件还没给它传值。
2.定义属性:brainstormData,写上类型:Array
父组件:
1.引入、注册组件:
2.为组件双向绑定属性,属性的值为一个参数,通过给参数赋值来实现为绑定的属性传值
3.在Data(){}中定义要用到的参数
4.为joinBrains赋值,值为从后端接收到的数据
到此父子组件传值的全部核心步骤就齐了。
二、父子组件传函数是通过$emit实现的,当子组件的方法需要在被引用后扩展的时候,$emit就发挥了作用。子组件需要用$emit来接收父组件传进来的方法,父组件要写具体的此方法步骤。实例(带参数:根据实际情况加参数):
老规矩先上图:
子组件:
1.点击触发goto方法,参数是父组件传过来的值
2.在methods里定义goto方法,方法内容是用$emit接收父组件传来的方法
父组件:
1.省略引入组件
2.@子组件的方法名,用来和子组件绑定,绑定的值为父组件中要具体去执行的方法的方法名
3.方法具体要做的是带着参数跳转页面
到此父子组件传函数的全部核心步骤就齐了。
更多推荐
所有评论(0)