Vue组件-组件通讯详解

alice--小文子 2022-09-23 09:32:12 阅读数:488

vue组件详解通讯

一:比较直接的方法(缺点:耦合度高,如若子组件方法改变,父组件要跟的去改变)

1 父组件获取子组件(详细代码见$ref)

在父级中添加ref:<Search @search="handleSearch" placeholder="搜索频道" ref="cc"/>

使用时:分别为获取子组件的变量及方法:

console.log(this.$refs.cc.searchVal)

console.log(this.$refs.cc.toParent())

2 子组件获取父组件:使用属性(详细代码见博文vue组件-属性及插槽)

(1)在父组件中添加属性,

(2)在子组件中添加props

二:使用$emit,$on(针对事件传递)

1 父组件传子组件(子组件传父组件同理)

父组件重要代码片段:

template中:

<input type="text" @click="fn()"/>
<child/ ref="cc">

methods中:

fn(){
this.$refs.cc.$emit("add",7);//第一个参数为方法名,第二个参数为传的参数
}

子组件不添加任何代码(即子组件可以不添加任何处理)不会报错。

子组件如果需要用,在子组件中:

created中:

this.$on("add",function (n){
this.num += n;
})

三 vueX(棒棒哒:全局,统一,单一)

1 优点:

(1)数据跨组件共享

(2)防止数据意外修改

(3)调试,测试

2 详细内容见Vuex模块

版权声明:本文为[alice--小文子]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/alice9999999/article/details/119488035