VUE 组件间的通信
父传子
使用
父组件用在使用子组件时绑定值进行传递,子组件用props接收
//父组件
<template>
<div>
<child :childData = 'msg'/>
</div>
</template>
<script>
export default {
components: {
child
},
data() {
return {
msg:'父组件传递的值'
};
},
props:{
}
}
</script>
//子组件
<template>
<div>
<h2>{{childData}}</h2>
</div>
</template>
<script>
export default {
props:['childData']
}
</script>
步骤
- 在子组件中声明props接收父组件挂载的属性
- 在子组件的template中使用
- 在父组件中绑定自定义属性
子传父
使用
//子组件
<template>
<div class="">
<input type="" @input="handleInput" />
</div>
</template>
<script>
export default {
methods: {
handleInput(e) {
this.$emit("inputValue", e.target.value);
},
},
};
</script>
<template>
<div>
<child @handleInput='input'/>
</div>
</template>
<script>
export default {
components: {
child
},
data() {
return {
msg:''
};
},
methods:{
input(newVal){
this.msg = newVal
}
}
}
</script>
步骤
- 在父组件 绑定自定义事件
- 在子组件 触发原生事件 通过this.$emit传递给父组件
兄弟组件之间
发送消息的一端用**$on**
接收消息的一端用**$emit**
注意,一定要用同一个实例!!!!
其他
provide 和indect
provide //父组件
indect //子组件使用
provide来提供变量,然后在子组件中通过inject来注入变量,无论是哪一层父组件
//父组件
export default{
provide(){
return{
msg:'我是父组件的消息'
}
}
}
export default{
inject:['msg'],
methods(){
msgAdd(){
let newmsg = this.msg+'我在子组件里了'
console.log(newmsg)
}
}
}
$parent
this.$parent.[属性]
直接取到父组件