组件的通讯方式(组件的传参)
1.父传子[juejin.cn/post/743114…]
2.子传父
3.后代传参/祖孙传参
4.事件总线
5.vuex
子传父
一、引入子组件
index是父，son是子，在同一个文件下
步骤一 引入组件
// 第一步 引入组件
import son from "./son.vue";
步骤二 注册组件
// 第二步 注册组件
components: {
// son: son,
// 简写：如果属性和属性值是一样的那么就可以直接简写
son
},
步骤三 使用组件
<son></son>
二、开始子传父
首先给子级添加变量
data(){
return{
str:"我是子组件---子父",
arr:[11,22,33,44,55],
obj:{
name:"呵呵呵呵"
}
}
},
两种方法：1.给子组件绑定一个自定义方法,值为接收子组件中参数的函数,然后到子组件内部通过this.$emit方法发送数据;2.给子组件绑定一个ref名称,然后通过this.$refs.名称来获取子组件实例
方法一：this.$emit
给子组件绑定自定义方，值为接受子组件中的参数的函数，这个函数会默认接受一个形参，这个形参就是接收的数据，注意这个函数不允许加()
<son @abc="handleSearch" @def="handleArr"></son>
然后在子组件(son.vue)中发送数据
handleClick(){
console.log(this);
// this.$emit("给子组件绑定的自定义方法名",传给父亲的参数)
this.$emit("abc",this.str)
},
handleArr(){
this.$emit("def",this.arr)
},
最后到父组件中接收数据
handleSearch(val){
console.log(val);
// 将接收到的数据赋值给data中的变量
this.s=val
},
handleArr(val){
this.a=val
}
方法二：this.$refs.名称
给子组件添加ref名称
<son ref="son"></son>
然后通过this.$refs.son来获取子组件实例
handleClick(){
// 当ref在标签上的时候获取的是dom元素
// 当ref在组件上的时候获取的是这个组件的实例（这个组件中定义的所有的函数和变量）
// console.log(this.$refs.名称,"获取dom元素");
console.log(this.$refs.son,"获取当前son组件的vue实例");
console.log(this.$refs.son.obj,"可以直接获取儿子中定义的变量");
}
这里可以通过this.$refs.son来调用子组件里面的函数,我理解为可以实现父传子,函数里面的参数为父组件里面的变量,然后在子组件中接收数据
// 直接调用儿子组件的方法，传递参数
this.$refs.son.handleHhh(this.str)
handleHhh(val){
console.log(val,"val为父组件传过来的数据");
}
代码
子组件
<template>
<div class="son">
<h1>我是儿子组件</h1>
<button @click="handleClick">发送</button>
<button @click="handleArr">发送</button>
</div>
</template>
<script>
export default {
data(){
return{
str:"我是子组件---子父",
arr:[11,22,33,44,55],
obj:{
name:"呵呵呵呵"
}
}
},
methods:{
// 第五步 发送数据
handleClick(){
console.log(this);
// this.$emit("给子组件绑定的自定义方法名",传给父亲的参数)
this.$emit("abc",this.str)
},
handleArr(){
this.$emit("def",this.arr)
},
handleHhh(val){
console.log(val,"hello");
}
},
mounted(){
// 默认发送数据
this.handleClick()
}
}
</script>
<style lang="scss" scoped>
.son{
background: green;
color: #fff;
padding: 10px 20px;
}
</style>
<!--
子传父：子组件在父组件中使用，然后子组件绑定自定义方法，值为接受参数的函数，然后到子组件内部通过this.$emit方法发送数据
给子组件标签中添加名字ref，然后直接调用儿子组件的方法，传递参数和获取变量
-->
父组件
<template>
<div class="zifu">
<h1>我是父组件</h1>
<!-- 给元素起一个名字 -->
<h2 ref="demo">{{ s }}--{{ a }}</h2>
<button @click="handleClick">点击</button>
<!-- 第三步 使用组件 -->
<!-- 第四步 给子组件绑定自定义方，值为接受子组件中的参数的函数，这个函数会默认接受一个形参，这个形参就是接收的数据，注意这个函数不允许加() -->
<zifuson
@abc="handleSearch"
@def="handleArr"
ref="son"
></zifuson>
</div>
</template>
<script>
// 第一步 引入组件
import zifuson from "./son.vue";
export default {
data(){
return{
s:null,
a:null,
str:"我是父组件"
}
},
methods:{
handleSearch(val){
console.log(val);
// 将接收到的数据赋值给data中的变量
this.s=val
},
handleArr(val){
this.a=val
},
handleClick(){
// 当ref在标签上的时候获取的是dom元素
// 当ref在组件上的时候获取的是这个组件的实例（这个组件中定义的所有的函数和变量）
console.log(this.$refs.demo,"获取dom元素");
console.log(this.$refs.son,"获取当前son组件的vue实例");
console.log(this.$refs.son.obj,"可以直接获取儿子中定义的变量");
// 直接调用儿子组件的方法，传递参数
this.$refs.son.handleHhh(this.str)
}
},
// 第二步 注册组件
components:{
zifuson,
}
}
</script>
<style lang="scss" scoped>
.zifu::v-deep{
background-color: pink;
padding: 50px 30px;
color: #fff;
h1{
color: #fff;
padding: 10px 0;
}
}
</style>
