vue子组件向父组件传值
子组件:
<template>
<!-- 子组件 -->
<div class="childCont">
<button @click="passData">将数据传递给父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
childData: "我是子组件的数据chilData",
};
},
methods: {
passData() {
//this$emit 接收两个参数,1、父元素接收方法 2、需要传递的数据
this.$emit('passChildData',this.childData);
},
},
};
</script>
<style scoped>
</style>
父组件:(使用v-on 事件函数接收参数)
<template>
<!-- 父组件 -->
<div class="parentCont">
<!--
@passChildData 子组件$emit 绑定的方法
add 父组件方法
-->
<Childs @passChildData="add"/>
</div>
</template>
<script>
// 映入子组
import Childs from "./components/child"
export default {
components:{
Childs
},
methods: {
add( data ) {
// data 子组件传递过来的数据
console.log(data) // 打印结果:我是子组件的数据chilData
}
}
}
</script>
下期讲解:vue父组件如何触发子组件的事件函数!!!