小程序 组件传参与插槽

组件

要做自定义组件，首先我们来看一下组件的简单使用

• 第一步先创建一个文件夹eg：components 然后点击文件夹按鼠标右键选择新建component ，之后输入index 按回车健就会出现 下图
  
  
  这个文件就是用来存放我们组件的

那么组件有了怎么让他渲染到我们页面中呢 请看下面

1. 第一步
   

  "usingComponents": {
    "my-components": "/components/index"
  }

2. 第二步
   
   看完这个你是不是会觉得这个跟vue的组件写法很像 ， 那么他的组件之间的父子传参也跟vue中是一样的思路

父传子

跟vue的语法基本是一致的

1. 第一步
   

<view>
  <my-components myvalue='我是父组件的参数'></my-components>
</view>

2. 第二步
   

  properties: {
    myvalue:{
      type:String,
      value:"默认值",
      observer:(newvalue,oldvalue)=>{
        console.log(newvalue,oldvalue);
        //newvalue新值
        //oldvalue老值（旧值）
      }
    }
  },

3. 第三步
   

子传父

1. 第一步
   
2. 第二步
   

    parent(){
      this.triggerEvent('myparent','参数')
    }

3. 第三步
   

  <my-components myvalue='我是父组件的参数' bind:myparent="myparent"></my-components>

4. 第四步
   

  myparent(e){
    //这样会获取到子组件传的参数
    console.log(e.detail);
  },

插槽

匿名插槽
1.

具名插槽

  //文档中可以找到，在指南下的自定义组件下组件模板和样式中
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },

    <view slot='mySlot'>
        我是具名插槽
    </view>