首先目录结构如下：
image.png
test.vue 自定义组件
<template>
<view>
这是一个test测试组件
<view>{{title}}</view>
<button @click="sendNum">父组件传值</button> //绑定点击事件
</view>
</template>
<script>
export default {
data() {
return {
num:3
};
},
props:['title'], //接收父组件传递的数据
methods:{
sendNum(){
// console.log(this.num);
this.$emit("eventSend",this.num); //向父组件传递信息
}
}
}
</script>
index.vue 父组件
<template>
<view class="content">
<test :title="title" @eventSend="getNum"></test>
<!--
:title 父组件向子组件传递数据信息
@eventSend 注册接收子组件传递信息的函数
-->
</view>
</template>
<script>
//引入子组件
import test from "../../components/test.vue"
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
getNum(data){
console.log(data);
}
},
components:{
test:test
}
}
</script>
