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>