欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

uniapp小程序父組件與子組件之間調(diào)用方法 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持！

您當前位置>首頁 » 新聞資訊 » 小程序相關 >

uniapp小程序父組件與子組件之間調(diào)用方法

發(fā)表時間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：182

最近公司安排做一個仿微信聊天的小程序，先實現(xiàn)聊天的基本功能，在項目過程中遇到一些小的知識點，在這里做下筆記；

由于之前沒有用過VUE，也沒有做過小程序，在看了VUE官網(wǎng)和uniapp官網(wǎng)后，開始邊學邊做。

一，子組件調(diào)用父組件的方法

子組件 IMMsg

<template>
    <view>
        <button @tap="showData(items)">獲取數(shù)據(jù)</button>
    </view>
</template>

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

            }
        }
    }
</script>

<style>

</style>

父組件中調(diào)用子組件的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>

輸出結(jié)果：

二，父組件調(diào)用子組件的方法

子組件 IMMsg

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

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

            }
        }
    }
</script>

<style>
</style>

父組件 chat.vue

<template>
    <view>
        <IMsg ref="IMsg"></IMsg>
        <button @tap="getData">調(diào)用子組件的方法</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>