parent.vue 父组件：
<template>
<div>
<h1>父组件</h1>
<child :parentToChildData="parentData" @childToParentData="getChildData"></child>
</div>
</template>
<script>
import child from '@/components/child'
export default {
components:{child},
data () {
return {
parentData: '父组件给子组件的数据',
childData: '用来存放子组件传回给父组件的数据',
};
},
methods: {
getChildData(childData) {
console.log(childData);
}
}
}
</script>
child.vue 子组件
<template>
<div>
<h1>子组件</h1>
<p>从父组件传过来的数据：{{parentToChildData}}</p>
<button @click="sonClick">点击按钮传数据回父组件</button>
</div>
</template>
<script>
export default {
props: ['parentToChildData'],
data () {
return {
childData:'返回给父组件的值'
};
},
methods:{
sonClick () {
this.$emit('childToParentData', this.childData);
}}
}
</script>
