子组件
<template>
<div>
<div>子组件:{{mag}}</div>
<button @click="select(text)">点击</button>
<!-- 自定义select传递方法 ,text传递数据-->
</div>
</template>
export default {
// props: ["sendData"],
data() {
return {
mag: "我是你儿",
text: "儿子你好",
};
},
methods: {
select(val) {
let data = {
text: val,
};
this.$emit("add", data);//add是父组件用来接收时的事件,data是传递过去的数据
console.log(data.text);
},
},
};
父组件
<template>
<div class>
<div ref="div">父组件:{{text}}</div>
<one @add="name"></one>
</div>
</template>
import one from "./emit/son.vue";
export default {
// import引入的组件需要注入到对象中才能使用
components: {
one,
},
data() {
// 这里存放数据
return {
text: "我是你爹",
};
},
methods: {
name(data) {
this.text = data.text;
console.log(this.text);
this.$refs.div.innerHTML = '父组件:'+data.text;
},
}
运行结果
点击前
点击后