用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

uniapp小程序父组件与子组件之间调用方法

Rolan 2020-11-19 10:33

uniapp小程序父组件与子组件之间调用方法



最近公司安排做一个仿微信聊天的小程序,先实现聊天的基本功能,在项目过程中遇到一些小的知识点,在这里做下笔记;

由于之前没有用过VUE,也没有做过小程序,在看了VUE官网和uniapp官网后,开始边学边做。

一,子组件调用父组件的方法

子组件  IMMsg


<template>
    <view>
        <button @tap="showData(items)">获取数据</button>
    </view>
</template>

<script>
    export default {
        name: 'IMMsg',
        props:{
                
        },
        data() {
            return {
                items:[
                    {
                        'key':'content',
                        'label':'内容'
                    }
                ]
            };
        },
        methods:{
            showData: function(data) {
                this.$emit("msg", data);

            }
        }
    }
</script>

<style>

</style>

父组件中调用子组件的showData方法

父组件  chat.vue

<template>
    <view>
        <IMsg @msg="showData"></IMsg>
    </view>
</template>

<script>
// 引入 IM 组件
import IMsg from '../../components/IMsg.vue';
export default {
    data() {
        return {
            datas:''
        };
    },
    methods: {
        showData: function(dd) {
            this.datas=dd;
            console.log(this.datas);
        }
    },
    components:{
        IMsg
    }
};
</script>

<style></style>
复制代码

输出结果:

 二,父组件调用子组件的方法

子组件  IMMsg

<template>
    <view>
    </view>
</template>

<script>
    export default {
        name: 'IMMsg',
        props:{
                
        },
        data() {
            return {
                items:[
                    {
                        'key':'content',
                        'label':'内容'
                    }
                ]
            };
        },
        methods:{
            showData: function(data) {
                console.log(this.items);

            }
        }
    }
</script>

<style>
</style>

父组件  chat.vue

<template>
    <view>
        <IMsg ref="IMsg"></IMsg>
        <button @tap="getData">调用子组件的方法</button>
    </view>
</template>

<script>
// 引入 IM 组件
import IMsg from '../../components/IMsg.vue';
export default {
    data() {
        return {
            datas:''
        };
    },
    methods: {
        getData: function() {
            this.$refs.IMsg.showData();
        }
    },
    components:{
        IMsg
    }
};
</script>

<style></style>

注:父组件可以通过$refs拿到子组件的对象

  然后直接调用子组件的 methods里的方法和data里的数据

打印结果:

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏