uniapp自定义组件

作者admin

10月 10, 2023

/components/cust-view/cust-view.vue (与page同级)

<template>
    <view>
        <view>hello,{{name}}</view>
        <view @click="handleClick">click</view>
    </view>
</template>
<script>
    export default {
        name:'privacyPopup',
        #对外属性
        props:{
            custname: {
                type: String,
                default: '',
            },
        },
        methods:{
            handleClick:function(e){
                //1.父组件的方法, e.要传递的参数
                this.$emit("custom-event", e);  
            },
        }
    }
</script>

页面调用

/pages/index/index

<template>
<view>
    <custView :custname="cName" @custom-event="doClick"></custView>
</view>
</template>
<script>
    import custViewfrom '@/components/cust-view/cust-view.vue';
    export default {
        components: {
            custView
        },
        data() {
            return {
                cName : 'world'
            },
        },
        methods: {
            doClick:function(){
                this.setData({cName :'judy'})
            },
        }
    }
</script>