uni-app——自定義組件

簡介

　　自定義組件

使用

　　1. 新建 components 目錄再創建組件即可

       2. 使用直接<組件名></組件名> 使用自定義組件

 

傳遞數據

　　3. 父組件通過屬性名傳遞數據，注意要v-bind!

        4.自定義組件內，props定義數據類型。即可通過{{}}取到數據

#調用子標簽界面
<cartoon-item-search v-for="cartoon in cartoonList" :cartoon="cartoon"  ></cartoon-item-search>


#子標簽
<script>
    export default {
        name:"good-item",
        props:{
            good:{
                type:Object
            }
        },
        data() {
            return {
                
            };
        }
    }
</script>

 

子組件附加事件

　1. 父組件使用 @事件的 .native 修飾符

<cart color="red" marginTop="20rpx" :person="person" @click.native="handleClick(item)" >item is {{item}}</cart>

　　methods: {
　　　　handleClick( value ){
　　　　　　console.log("value: "+value);
　　　　}
　　}

 

插槽

　　插槽即占位符。父組件使用子組件時候，再標簽內直接輸入數據，子組件通過插槽占位輸出

　　<slot></slot>

// 父組件
<cart color="red" marginTop="20rpx" :person="person" @click.native="handleClick(item)" >item is {{item}}</cart>


// 子組件
<view :style="{background:color,marginTop:marginTop}">
        <slot></slot>
        <view></view>
        color:{{color}}, {{background}}
        <view>{{person}}</view>
    </view>