美文网首页
小程序component组件

小程序component组件

作者: Cherry9507 | 来源:发表于2019-06-05 11:56 被阅读0次

简介

1.自定义组件搭建
2.组件内部方法
3.父子传参
4.slot

搭建并引入components

##新建components文件夹
##components文件夹里新建组件文件夹(右击components文件夹新建components),会自动产生四个文件,同新建普通页面一样,新建components的话,四个文件自动产生内容与普通文件夹略有不同
image.png

wxss页面定义wxml里面的样式不多说

##wxml
<view>
  <!--使用组件中的content属性-->    
  <view >儿子</view>
  <!--使用组件中的methods-->
</view>

##js
Component({
  //  组件的属性列表, 我这里定义了2个属性(content和iconTypes), 根据需求自己定义
  properties: {
    content: {
      type: String,
      value: ''
    }
  },
  // 私有数据,可用于模版渲染
  data: {
  },
  // 组件的方法列表
  methods: {
 
  }
})

##json  注意 json中不可以写注释,会报错
{
  "component": true, 
  "usingComponents": {} 
}

组件搭好了,1.在需要用到组件的json页面直接引入

##myItem就是组件名,跟自带组件一样的写
{
  "usingComponents": {
    "myItem": "/components/item/console"
  }
}

2.在需要用到组件的json页面直接引入

##wxml
 <!-- 自定义组件 -->
  <view>
    <myItem></myItem>
  </view>

到此!引用组件的页面就会显示‘儿子’,简单引用组件完成,下面介绍处理方法

组件内部方法定义(wxml写绑定事件,js的methods里面写方法)

##wxml
<view>
  <!--使用组件中的methods-->
  <view>
    <button size='mini' catchtap='clickMe' class='btn'>cilck here</button>
  </view>
</view>

##js
Component({
  //  组件的属性列表, 我这里定义了2个属性(content和iconTypes), 根据需求自己定义
  properties: {
    content: {
      type: String,
      value: ''
    }
  },
  // 组件的方法列表
  methods: {
    clickMe: function () {                // 根据需求定义事件
      console.log("you have clicked me");
    }
  }
})

到此!在引入组件的文件中点击这个按钮就可以操作到myItem组件的事件咯~

参数父传子模拟

##console.wxml
 <view >{{content}}</view>
##console.js properties里定义content
Component({
 //  组件的属性列表, 我这里定义了2个属性(content和iconTypes), 根据需求自己定义
 properties: {
   content: {
     type: String,
     value: ''
   }
 },
 // 私有数据,可用于模版渲染
 data: {
 },
 // 组件的方法列表
 methods: {
   clickMe: function () {                // 根据需求定义事件
     console.log("you have clicked me");
   }
 }
})
##父亲wxml
  <view>
    <myItem catchtap="clickItem" content="{{chuancan}}" >
    </myItem>
  </view>
##父亲 js
Page({
  data: {
    show1:false,
    focus:false,
    chatNews:[],
    chuancan:'儿子你好', //这里改变content值,可以看到儿子里的{{content}}内容会变成父亲这里的参数
  }
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      chatNews: dataBase.data
    })
  }
})

子向父传参

##父亲用myevent(可以随便写名字)给子组件发射,然后绑定一个父组件函数接受myevent带过来的参数
 <view>
    <myItem catchtap="clickItem" content="{{chuancan}}" bind:myevent="onMyEvent" >
<text>{{ctof}}</text>
  </view>
##子组件wxml
<view>
    <button size='mini' catchtap='clickMe' class='btn'>cilck here</button>
</view>
##父亲js
Page({
data:{
ctof:111
},
//e.detail接收
onMyEvent:function(e){
    this.setData({
      ctof: e.detail.ctof
    })
  },
})
##子组件js
Compionent({
methods: {
    clickMe: function () {    
//使用 triggerEvent 方法,指定事件名、detail对象和事件选项
      this.triggerEvent('myevent', { ctof: 123 });
    }
  }
})

这样,当你点击子组件的button按钮时,父组件的111就会改成123了

slot

在组件模板中可以提供一个 <slot> 节点,用于承载组件引用时提供的子节点。

Component({
  //  组件的属性列表, 我这里定义了2个属性(content和iconTypes), 根据需求自己定义
  properties: {
    content: {
      type: String,
      value: ''
    }
  },
  options: {
    multipleSlots: true     // 启用多slot支持
  },

  // 私有数据,可用于模版渲染
  data: {
  },
  // 组件的方法列表
  methods: {
    
  }
})
##子组件
<view>
  <!--使用组件中的content属性-->    
  <!--给conent一个值hello, hello会传递到item.js中的content属性中, 然后使用{{}}把它取出来 -->
  <view >{{content}}  word</view>
  <slot name="one"></slot>
  <slot name="two"></slot>
</view>
##父组件
<view>
    <myItem catchtap="clickItem" content="{{chuancan}}" bind:myevent="onMyEvent" >
      <icon slot="one" type='success'></icon>
      <view slot="one">插入到组件slot name="one"中的内容</view>
      <text slot="two">插入到组件slot name="two"中的内容</text>
    </myItem>
  </view>

此时,父组件的‘插入。。。’就会显示在子组件的<slot>里

相关文章

网友评论

      本文标题:小程序component组件

      本文链接:https://www.haomeiwen.com/subject/xjyrxctx.html