vue中的组件传值有三种方式:父传子、子传父、非父子传值
前言
父子组件的关系可以总结为 prop 向下传递，事件向上传递 简而言之，父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示
父传子
父组件里面用属性传递 ，子组件内用props 接收
- 父组件
//父组件
<template>
<div class=''>
这里是父组件
<!-- 引用子组件 -->
<LoginChild :msg='txt' ></LoginChild> <!-- 定义子组件props接收名称 -->
</div>
</template>
<script>
import LoginChild from "./loginChild.vue" //引入子组件
export default {
data(){
return {
txt:"这是父组件的值"
}
},
components:{
LoginChild //注册子组件
},
methods:{
deliver(data){
this.txt=data
}
}
}
</script>
- 子组件
//子组件
<template>
<div class=''>
这里是子组件
--》{{msg}}《--
</div>
</template>
<script>
export default {
props:{
msg:{
type:String,
default:''
}
},
}
</script>
通俗来点讲父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind(动态绑定) 将子组件中预留的变量名绑定为data里面的数据即可
子传父
- 子组件
<template>
<div class=''>
这里是子组件
<input
type="text"
placeholder="请输入手机号"
v-model="username"
@input="userFun"
/>
</div>
</template>
<script>
export default {
data(){
return {
username:""
}
},
methods:{
userFun(e){
this.username=e.target.value
//emit传两个值，第一个值是定义的名字，第二个值是需要传往父组件的值
this.$emit("change", this.username);
}
},
}
</script>
- 父组件
<template>
<div class=''>
这里是父组件
<!-- 引用子组件 -->
<LoginChild @change="changeFun" ></LoginChild> <!-- 接收子组件定义事件名称 -->
</div>
</template>
<script>
import LoginChild from "./loginChild.vue" //引入子组件
export default {
data(){
return {
value:{
name:''
}
}
},
//注册子组件
components:{
LoginChild
},
methods:{
changeFun(val){ //这里的 val 便是子组件传来的值
this.name=val
console.log(this.name)
}
}
}
</script>
子传父的实现方式就是用了 emit 来遍历事件，首先 input 触发 userFun 事件，在 userFun 中 用
this.$emit来向父组件来传this.username
总结：
- 子组件中需要以某种方式，例如点击事件的方法来触发自定义事件
- 将需要传的值作为
$emit的第二个参数，该值将作为实参传给响应自定义事件的方法 - 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
非父子传值
也可以说成是公共组件传值，顾名思义也就是没有父子关系的两个组件，需要通过一个公共的组件来进行传值，即定义一个事件总线bus 用来进行兄弟之间的传值
定义一个中央的事件总线,在需要接收数据的哪一方,通过bus.$on('Fun',(val)=>{}) 接收数据，在发送的一方通过bus.$emit('Fun',"传递的数据")发送数据，
但接收数据的一方必须要先进行触发事件才可
- 公共组件
import Vue from 'vue'
export default new Vue()
- 组件一（发送数据方）
<template>
<div class="one">
one
<button @click="Fun">one</button>
</div>
</template>
<script>
//引入公共组件
import bus from '@/utils/bus.js';
export default {
methods:{
Fun(){
bus.$emit('asd',"one给two的值")
}
}
}
</script>
- 组件二（接收数据方）
<template>
<div class="two">
two
</div>
</template>
<script`>`
//引入公共组件
import bus from '@/utils/bus.js';
export default {
created(){
////必须触发Fun这个事件 组件一 才可以进行传值
this.Fun() //这里触发了事件！！！！
},
methods:{
Fun(){
//接收数据
bus.$on('asd',(val)=>{
console.log('我这里接收了one给two的值')
})
}
}
}
</script>
