组件的通讯方式(组件的传参)
1.父传子
2.子传父[(juejin.cn/post/743145…)]
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],
num: 250000,
s: "我是父组件中的s",
wwh: "哈哈哈"
}
},
三种方法：props,$attrs.属性，$parent
方法一：props
给子组件绑定自定义属性，：自定义属性="父组件传递给子组件中的变量"
<son :a="str" :arr="arr" :num="num" :s="s"></son>
在子组件(son.vue)中接收中渲染数据
props有两种方法可以接收渲染数据（与data()是同级，直接写在default对象里）
方法一：
// 方法1： props:["自定义属性"]
props:["a","arr","num","s"],
方法二：
props:{
a:{
// 接受数据类型
type:String,
// 如果没有传递参数那么设置一个默认值
default:"默认值",
// // 必传参数
required:true
},
arr:{
type:Array,
// 复杂的数据类型必须按照这个写法。如果接受的是数组返回[],如果接受的是对象return {}
default:()=>{
return []
}
}
},
渲染到子组件中
<p>
<!-- 渲染接受来的数据，子组件一旦接受，this中就会存在接手过来的变量 -->
{{ a }}--{{ arr }}
</p>
方法二：$attrs.属性
给子组件绑定自定义属性，：自定义属性="父组件传递给子组件中的变量"
<son :a="str" :arr="arr" :num="num" :s="s"></son>
在子组件(son.vue)中接收中渲染数据，可以直接通过$attrs.属性渲染数据
<p>
<!-- 在子组件内部可以直接通过$attrs.自定义属性来接受数据。注意通过props接受过的数据不能再通过attrs接受了
$attrs是vue新出的祖辈传参的方式
-->
{{ $attrs.num }}---{{ $attrs.s }}
</p>
方法三：$parent
不需要子组件绑定自定义属性，直接通过$parent渲染数据
<p>
{{ $parent.wwh }}--{{$parent.str }}}
</p>
代码
父组件
<template>
<div class="father">
<h1>我是父组件</h1>
<!-- <router-link to="/index/fuzi/zubei">三级</router-link>
<router-view></router-view> -->
<!--第三步 使用组件 -->
<!-- 第四步给子组件绑定自定义属性，：自定义属性="父组件传递给子组件中的变量" -->
<son :a="str" :arr="arr" :num="num" :s="s"></son>
</div>
</template>
<script>
// 第一步 引入组件
import son from "./son.vue";
export default {
data() {
return {
str: "我是父组件",
arr: [11, 22, 33, 44],
num: 250000,
s: "我是父组件中的s",
wwh: "哈哈哈"
}
},
methods: {
handleClick() {
alert("我是父组件")
}
},
// 第二步 注册组件
components: {
// son: son,
// 简写：如果属性和属性值是一样的那么就可以直接简写
son
},
mounted() {
console.log(this, "father");
}
}
</script>
<style lang="scss" scoped>
.father {
padding: 20px;
background-color: yellow;
}
</style>
子组件
<template>
<div class="son">
<h1>我是子组件</h1>
<p>
<!-- 渲染接受来的数据，子组件一旦接受，this中就会存在接手过来的变量 -->
{{ a }}--{{ arr }}
</p>
<p>
<!-- 在子组件内部可以直接通过$attrs.自定义属性来接受数据。注意通过props接受过的数据不能再通过attrs接受了
$attrs是vue新出的祖辈传参的方式
-->
{{ $attrs.num }}---{{ $attrs.s }}
</p>
<p>
{{ $parent.wwh }}--{{$parent.str }}}
</p>
</div>
</template>
<script>
// 第五步接受 在子组件内部通过props接收数据
export default {
// 方法1： props:["自定义属性"]
// props:["a","arr","num","s"],
// 方法2：
props:{
a:{
// 接受数据类型
type:String,
// 如果没有传递参数那么设置一个默认值
default:"默认值",
// // 必传参数
required:true
},
arr:{
type:Array,
// 复杂的数据类型必须按照这个写法。如果接受的是数组返回[],如果接受的是对象return {}
default:()=>{
return []
}
},
// num:{
// type:Number,
// default:"默认值",
// required:true
// },
// s:{
// type:String,
// default:"hhh",
// required:true
// }
},
data(){
return{
}
},
mounted(){
console.log(this,"son");
// this.$parent可以直接获取父组件中的变量或者函数
// this.$parent.handleClick()
console.log(this.$parent,"$parent");
}
}
</script>
<style lang="scss" scoped>
.son{
padding: 20px;
background-color: pink;
}
</style>
<!--
组件的通信方式？组建的传参方式有哪些？
父传子：
①首先在父组件中引入并使用子组件，然后给子组件绑定自定义属性，然后到子组件内部通过props接受
②通过vue新出的祖辈传参的方式$attrs来获取
③this.$parent可以直接获取父组件中的变量或者函数
-->
