1、父组件使用 props 把数据传给子组件
2、子组件使用 $emit 触发父组件的自定义事件
子组件:child.vue
<template>
<div class="child">
<h3>接收父组件传递过来的值:{
{sendData}}</h3>
<br/>
<button @click='toParent'>点击将子组件内容传递给父组件</button>
</div>
</template>
<script>
export default {
props:['sendData'],
methods:{
toParent() {
this.$emit('showData',"通过$emit传递给父组件");//toParent事件触发后,自动触发showData事件
}
}
}
</script>
父组件:parent.vue
<template>
<div class="parent">
<p>{
{childData}}</p>
<Child @showData="updateData" :sendData="childData"></Child>
</div>
</template>
<script>
import Child from "./child";
export default {
components: {Child},
data(){
return {
childData:"父组件传递给子组件的值"
}
},
methods:{
//通过触发子组件触发,修改父组件定义的值
updateData(data){
this.childData=data;
}
}
}
</script>