1.父组件传值子组件
原理:父组件给子组件添加属性,子组件通过props获取属性值,接收到父组件传递的参数;
案例如下:
父组件代码如下:
<template>
<div>
<!-- 父组件添加入参生成模块 -->
父组件传递:<input type="text" v-model="value">
<!-- 子组件定义传递参数属性text -->
<ChildA
:text='value'>
</ChildA>
</div>
</template>
<script>
import ChildA from '../components/childA.vue';
export default {
data(){
return{
value:''
}
},
components:{
ChildA,
},
}
</script>
子组件代码如下:
<template>
<div>
接收父组件的值:{{text}}
</div>
</template>
<script>
export default {
data(){
return{}
},
// 接收父组件属性
props:['text']
}
</script>
ps:在父组件定义text属性并将参数通过该属性传递至子组件ChildA,在子组件通过props接收text属性并使用;
2.子组件传值父组件
原理:子组件通过$emit派发,子组件通过props获取属性值,接收到父组件传递的参数;
案例如下:
子组件代码如下:
<template>
<div>
<!-- 子组件添加入参生成模块,监听输入框改变向父组件发送数据“childChange”-->
子组件传递:
<input
type="text"
v-model="value"
@input='childChange'>
</div>
</template>
<script>
export default {
data(){
return{
value:''
}
},
methods:{
childChange(){
// 通过this.$emit向父组件发送数据,数据放在“childChange”中
this.$emit('childChange',this.value)
}
}
}
</script>
父组件代码如下:
<template>
<div>
父组件接收值:{{text}}
<!-- 绑定“childChange”,添加回调“receive”接收参数 -->
<ChildA
@childChange='receive'>
</ChildA>
<p />
</div>
</template>
<script>
import ChildA from '../components/childA.vue';
export default {
data(){
return{
text:''
}
},
components:{
ChildA,
},
methods:{
// 通过回调函数入参获取子组件传递的参数
receive(value){
this.text = value;
}
},
}
</script>
ps:在子组件定义方法通过this.$emit发送数据,在父组件通过给子组件添加绑定事件,获取子组件的参数并使用;
3.兄弟组件传值
原理:引入中间控件,发送数据组件通过$emit发送数据,接收数据组件通过$on接收数据;
案例代码如下:
中间控件代码如下:
import Vue from 'Vue';
export default new Vue;
ps:创建一个vue实例并导出,作为中间控件使用;
父组件代码如下:
<template>
<div>
<ChildA></ChildA>
<childB></childB>
</div>
</template>
<script>
import ChildA from '../components/childA.vue';
import ChildB from '../components/childB.vue';
export default {
data(){
return{}
},
components:{
ChildA,
ChildB
},
}
</script>
子组件A(数据发出组件)代码如下:
<template>
<div>
<!-- 子组件A添加入参生成模块,监听输入框改变向组件B发送数据-->
子组件传递:
<input
type="text"
v-model="value"
@input='childChange'>
</div>
</template>
<script>
// 引入中间控件
import Bus from '../assets/Bus.js';
export default {
data(){
return{
value:''
}
},
methods:{
childChange(){
// 通过Bus.$emit向B组件发送数据,数据放在“childChange”中
Bus.$emit('childChange',this.value)
}
}
}
</script>
子组件B(数据接收组件)代码如下:
<template>
<div>
组件接收的值{{text}}
</div>
</template>
<script>
// 引入中间控件
import Bus from '../assets/Bus.js';
export default {
data(){
return{
text:''
}
},
created(){
// 通过Bus.$on接收A组件发来数据
Bus.$on('childChange',(value)=>{
this.text = value
})
}
}
</script>
ps:在发送数据和接收数据的组件都需要引入Bus.js作为中间控件;
以上内容为个人总结,不足之处还望支持,欢迎留言交流~