组件

对页面的动、静态的封装

1创建组件的步骤

 1. 创建组件文件夹 ==>  编辑组件动态静态效果
 2. 引入组件 

2 父传子

通过使用组件的页面传递 数据 给组件将其渲染

   父：“使用组件的页面”
   子："组件"

1.传递

<ListItem rItem="{{item}}" bindchildGo="childGo"></ListItem>
// 通过组件标签的自定义属性传递{{data}}

2.接收

   //在coponents的属性列表接受
    properties: {
        rItem:{
        //传递数据类
            type:Object,
            //默认值
            value:{
                url:'https://www.enterdesk.com/face/96790.html',
                imageUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2F80%2F4b%2Fb5%2F804bb51279b3f24270e275e0b8cc9395.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648446790&t=402c74db5512e66fcbbf8a0493275401",
                title:"皮卡丘",
                content:"十万伏特十万伏特十万伏特十万伏特十万伏特十万伏特十万伏特十万伏特十万伏特"
            }
        }
    },

子传父

双向修改父传递过来的数据

组件js：
 methods: {
        handler:function(){
            /* 因为直接改子组件里面的msg 父组件不会同步，所以不能直接改 */
            // this.setData({
            //     msg:'你真坏'
            // })
            /* 使用triggerEvent触发事件，(触发事件名，附带的值) */
            this.triggerEvent('childChange','你可真坏呀，下次不许这样了')
        }
    }
 
页面HTML:
<view>父组件的msg的值：{{msg}}</view>
<Header msg="{{msg}}" bindchildChange="change"/>
<block wx:for="{{list}}" wx:key="index">
                             <!-- 绑定子组件设置的触发事件 -->
    <ListItem rItem="{{item}}" bindchildGo="childGo"></ListItem>
</block>
<test></test>

插槽

在"页面组件标签"里添加的内容会提交给组件的插槽中(slot)

页面html：
<CompA msg="{{msg}}" bindhandler="handler">
    <view style="font-size:30px;" slot="s1">张国荣--沉默是金</view>
    <view style="font-size:30px;" slot="s2">张学友--吻别</view>
</CompA>

组件js：
<slot name="s1"></slot>
<view bindtap="childChange">{{msg}}</view>
<!-- 插槽里面显示的是组件标签插入的内容 -->
<slot name="s2"></slot>

定义多个插槽

1.需要给插槽设置ID，通过id实现插槽的摆放位置

2.在组件js中开启

  options:{
      multipleSlots:true
  },