1、vue组件通信的三种传值方式
- 父传子
- 字传父
- 兄弟组件传值
1.1父传子
在父组件Father.vue
<template>
<div>
<!-- 在父组件中使用该组件 定义一个key 然后是要传递的值 -->
<Son msg="hello word" />
</div>
</template>
<Script>
//这里引入组件
import Son from "../components/Son.vue";
export default{
components:{
//导入的组件需要在components中注册
Son
}
}
</Script>
子组件Son.vue
<template>
<div>
<h1>
<!-- 在子组件中使用传递的值 -->
{{msg}}
</h1>
</div>
</template>
<Script>
export default{
props:{
//父组件穿的的key值再props中定义 后面是传的值的类型
msg:String
}
}
</Script>
1.2字传父
在子组件Son.vue
<template>
<div>
<!-- 定义一个点击事件 -->
<button @click="onClick"></button>
</div>
</template>
<Script>
export default {
data() {
return {
// 设置一个属性
data:"哈哈"
}
},
// 点击事件在methods中定义
methods: {
onClick(){
// 使用this.$emit方法传递要传递的数据
// 第一个参数是父组件监听的方法名 第二个是要传递的参数
this.$emit("tranData",this.data)
}
},
}
</Script>
父组件Father.vue
<template>
<div>
<!-- 绑定一个事件 监听子组件传递的方法名 -->
<Son v-on:tranData="monitorData" />
<p>
{{data}}
</p>
</div>
</template>
<Script>
// 导入子组件
import Son from "./Son";
export default{
components:{
Son
},
data() {
return {
data:""
}
},
// 使用定义的方法 参数就是传递过来的值
methods: {
monitorData(value){
this.data = value
}
},
}
</Script>
1.3兄弟组件传值
- 兄弟组件传值有两种方法
- 第一种是在父组件中定义一个值接收 然后再传递给另一个组件
- 第二种是定义一个空的vue文件用来传值
第一种方法
子组件一
<template>
<div>
<!-- 定义一个点击事件 -->
<button @click="onClick"></button>
</div>
</template>
<Script>
export default {
data() {
return {
// 设置一个属性
data:"哈哈"
}
},
// 点击事件在methods中定义
methods: {
onClick(){
// 使用this.$emit方法传递要传递的数据
// 第一个参数是父组件监听的方法名 第二个是要传递的参数
this.$emit("tranData",this.data)
}
},
}
</Script>
父组件
<template>
<div>
<Child v-on:tranData="monitorData" />
<!-- 动态绑定一个key 传递给另一个子组件 -->
<Child2 :str="data" />
</div>
</template>
<Script>
// 导入子组件
import Child from "./Child"
import Child2 from "./Child2"
export default{
components:{
Child,
Child2
},
data() {
return {
data:""
}
},
// 使用定义的方法 参数就是传递过来的值
methods: {
monitorData(value){
//把子组件一传递过来的值赋值给在data中自定义的一个属性
this.data = value
}
},
}
</Script>
子组件二
<template>
<div>
<h2>
<!-- 使用传递过来的值 -->
{{str}}
</h2>
</div>
</template>
<script>
export default {
props:{
str:String
}
}
</script>
第二种方法
定义一个空的js文件eventBus.js
import Vue from 'vue'
export default new Vue()
子组件一
<template>
<div>
<!-- 定义一个点击事件 -->
<button @click="onClick"></button>
</div>
</template>
<script>
//导入eventBus.js文件
import eventBus from "./eventBus.js"
export default {
data() {
return {
data:"哈哈"
}
},
// 点击事件在methods中定义
methods: {
onClick(){
//使用该文件提交一个方法 参数和子传父一样
eventBus.$emit("add",this.data)
}
},
}
</script>
子组件二
<template>
<div>
</div>
</template>
<script>
import eventBus from "./eventBus.js"
export default {
props:{
str:String
},
//使用created生命周期函数
created() {
//msg就是传递的参数
eventBus.$on("add",(msg)=>{
window.console.log(msg)
})
},
}
</script>