uniapp 自定义组件

根目录components下制作一个vue组件文件

<template>
    <view class="board">
        <text class="red">我是组件</text>
        <view>{{msg}}</view>
        <view>
            <button class="btn"  @click="sayHelloToFather">子组件按钮<br>点了发消息给父</button>
        </view>
    </view>
</template>

<script>
    export default {
        props:['msg'],
        data() {
            return {
                
            };
        },
        methods:{
            sayHelloToFather(){
                this.$emit('childEvent','子组件发给父组件的消息','hahaha')
                
                uni.$emit('getInfo', '樱桃小丸子')
            }
        }
    }
</script>

<style scoped>
    .red{
        color: red;
        
    },
    .board{
        margin: 40rpx;
        padding: 30rpx;
        background-color: #48a;
    },
    .btn{
        width: 400rpx;
    }
</style>

组件的引用

<getPicArticle></getPicArticle>

import getPicArticle from '@/components/getPicArticle.vue'

components:{
            getPicArticle
        },

完整例子


<template>
    <view>
        <view>
            <text>我</text>
            <getPicArticle :msg="title" @childEvent="getFromSon"></getPicArticle>
        </view>
        <button @click="setSon('dddddd')">父组件的按钮<br>点了设置子组件的props</button>
    </view>
</template>

<script>
    import getPicArticle from '@/components/getPicArticle.vue'
    export default {
        data() {
            return {
                title : "发给子组件的信息props:msg"
            }
        },
        components:{
            getPicArticle
        },
        methods: {
            getFromSon(s1,s2){
                this.$u.toast("父组件收到:"+s1+s2) 
            },
            setSon(s){
                this.title = s
            }
        }
    }
</script>

<style>

</style>
发表新评论