首先我们先看props方法传值在父组件中把数据定义好
<template>
<div class="home">
<HelloWorld :Fnadd="fnTxt" :txtlist="txtlist" txt="我是标题"/>
</div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld,
},
data() {
return {
txtlist: [
{ id: "v1", title: "大哥" },
{ id: "v2", title: "二哥" },
],
};
},
methods:{
fnTxt(val){
console.log("这里是父级传递的方法"+val)
}
}
};
</script>
接着就是子组件中用,代码如下:
<template>
<div class="hello">
<div>这里是父级传递过来的数据:{{txt}}</div>
<div>这里是父级传递过来的数组:{{txtlist}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
txt:String,
txtlist:Array,
Fnadd:Function
},
created(){
this.Fnadd(12)
}
}
</script>
然后就是我们的$emit方法
父组件中:
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld @toParent="getSon" />
</div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld,
},
methods: {
getSon(e) {
console.log("接收到了子级的数据", e);
},
},
};
</script>
子组件中
<template>
<div class="hello">
<button @click="fnby">子传值</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
methods: {
fnby() {
this.$emit("toParent", 66666);
},
},
};
</script>