vue组件之间互相传值:父传子,子传父
vue组件之间互相传值:父传子,子传父为什么要用到组件间传值?答:组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据,也不能直接将子组件的数据传到父组件里面,所有我们要用到组件间传值。父组件向子组件传值步骤:(可传数据,方法)首先,值肯定是定义在父组件中的,供所有子组件共享。所以要在父组件的data中定义值其次,父组件要和子组件有契合点:就...
·
vue组件之间互相传值:父传子,子传父
- 为什么要用到组件间传值?
答:组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据,也不能直接将子组件的数据传到父组件里面,所有我们要用到组件间传值。 - 父组件向子组件传值步骤:(可传数据,方法)
- 首先,值肯定是定义在父组件中的,供所有子组件共享。所以要在父组件的data中定义值
- 其次,父组件要和子组件有契合点:就是在父组件中调用、注册、引用子组件.
- 接下来,就可以在父组件和子组件链接的地方(即引用子组件的标签上),把父组件的值绑定给子组件
- 最后,子组件内部肯定要去接受父组件传过来的值:props(小道具)来接收.
- 这样,子组件内部就可以直接使用父组件的值了.
例子1:(父组件向子组件传数据)
例子2:(父组件向子组件传方法)
父组件写个方法
子组件使用这个方法
例子3:(不同的父组件调用同一个子组件,子组件展示的内容部分不同)
需要注意的点:
子组件接受的父组件的值分为——引用类型和普通类型两种,
普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null)
引用类型:数组(Array)、对象(Object)
普通类型是可以在子组件中更改,不会影响其他兄弟子组件内同样调用的来自父组件的值,但是,引用类型的值,当在子组件中修改后,父组件的也会修改,那么后果就是,其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做,否则最好不要这么做。
- 子组件向父组件传值步骤 :(可传数据,方法)
- 子组件向父组件传递
方法
:
子组件定义好方法,父组件在引用子组件的时候在自定义标签中添加标识符,ref=”child1(随便起的名字)(ref是方法,chiild是标识符)”
,用来表示这个子组件。父组件在methods中定义自己的方法名,方法主体:this.$refs.child1.fun
。意思是通过调用$refs
中名字叫child1的子组件里的fun方法,赋值给父组件。 - 子组件向父组件传递
方法
步骤: (子组件里面有初始化列表,要在父组件中点击tabs栏中调用这个方法,需要用到$refs
)
- 子组件中定义方法
- 父组件中引用子组件时,添加一个标识符
rel=’aaa’
,注意rel是语法,aaa是标识 - 父组件中定义一个方法,表示方法就是标识为aaa的子组件里的alert2方法
- 调用
例子:
子组件中定义方法:
父组件中添加标识:
父组件中定义方法:
调用: (必须有一个触发,可以是点击事件)
- 子组件向父组件传递
数据
:
子组件定义一个方法,在这个方法中通过this.$emit(‘change’,’changeMsg’)(第一个参数是传的名称,第二个参数是传的整个数据)
方式发送数据changgeMsg,父组件中监听change事件,在引入的子组件中@change ="change"
(最后这个change是个方法名,用来接受子组件传过来的数据,可以随便起个名字),当事件触发(比如说父组件页面是有关完结按钮操作)时,执行函数,进行赋值(比如this.a = 我传的那个参数) ,最后在触发事件函数里写上this.$refs.aaa.change()
,。 - 子组件向父组件传递
数据
步骤:
- 子组件定义方法
- 父组件监听方法事件触发时执行函数
- 定义一个带参数的方法,调用时,让本组件的数据等于传递过来的参数,事件数据传递。
例子:
this.a 就是接受子组件中传过来的数据
- 子组件向父组件传递
更多推荐
已为社区贡献14条内容
所有评论(0)