uni-app 之组件之间的通讯方式

首先目录结构如下:


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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容