父组件
<template>
<div>
这是父组件
<children v-bind:parentToChild="toChild" v-on:showChildMsg="formChild"></children>
<!-- 使用vind:参数名 绑定传值，使用on:参数名 来监听接收子组件传来的信息-->
{{showChildMsg}}
</div>
</template> <script>
import children from "./children.vue";
export default {
name: "HelloWorld",
data() {
return {
toChild:"父组件传值给子组件",
showChildMsg:''
};
},
methods: {
formChild:function(data){
//监听子组件子组件传值
this.showChildMsg = data;
}
},
components: { children }
};
</script> <style scoped> </style>
子组件
<style scoped>
/* css */
</style>
<template>
<div class id>
{{parentToChild}}
<br/>
<button @click="goParent">点击向父组件传值</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
goParent: function() {
this.$emit("showChildMsg", "这是子组件传值给父组件");
//子组件 通过$emit函数向父组件传值，这个showChildMsg参数名对应的就是父组件里面的v-on：showChildMsg参数名
}
},
activated() {},
props: ["parentToChild"]
};
</script>