1、:host相当于组件本身(比如你组件名叫 v-name 然后这个组件里面的:host就是v-name
)
:host {//这个是组件本身(比如组件名为v-name)v-name的样式
color: yellow;
}
相当于
v-name{
color: yellow;
}
2、比如app.wxss(公共样式)里面有个 .section ,组件也有,组件不开放公共样式的话就只用组件里的样式了。
3、在 properties 定义段中,属性名采用驼峰写法(propertyName);在 wxml 中,指定属性值时则对应使用连字符写法(component-tag-name property-name="attr value"),应用于数据绑定时采用驼峰写法(attr="{{propertyName}}")。
4、 that.setData({
'A[0].B': 'myPrivateData'
})=====相当于
( that.replaceDataOnPath( ['A', 0, 'B'], 'myPrivateData'); // 替代数据:这里将 data.A[0].B 设为 'myPrivateData';‘A’表示数组本身,0表示索引位置,‘B’表示数组子元素中的某一对象;
that..applyDataUpdates();//更新数据
)
5、
bug : 对于 type 为 Object 或 Array 的属性,如果通过该组件自身的 this.setData 来改变属性值的一个子字段,则依旧会触发属性 observer ,且 observer 接收到的 newVal 是变化的那个子字段的值, oldVal 为空, changedPath 包含子字段的字段名相关信息。
6、 observer: function (newVal, oldVal, changedPath) {
this._propertyChange(newVal, oldVal, changedPath)
}
methods: {
_propertyChange: function (newVal, oldVal, changedPath) {
console.log(newVal);
console.log(oldVal);
console.log(changedPath);
}
}
======相当于=====
observer: function (newVal, oldVal, changedPath) {
console.log(newVal);
console.log(oldVal);
console.log(changedPath);
}
7、组件间通信
组件间的基本通信方式有以下几种。
WXML 数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容数据(自基础库版本 2.0.9 开始,还可以在数据中包含函数)。具体在 组件模版和样式 章节中介绍。
事件:用于子组件向父组件传递数据,可以传递任意数据。
如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。
注:this.selectComponent方法的用法:
index.wxml界面:
<!-- 引用组件的页面模版 -->
<view>
<my-component bindmyevent="myEventListener" id="main">
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件slot中的内容</view>
</my-component>
</view>
index.js文件:
Page({
data: {
},
onReady: function () {
var main=this.selectComponent("#main");
console.log(main.data.on);
}
})
8、dataset
在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。
示例:
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({
bindViewTap:function(event){
event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
}
})
9、(1) ./当前目录
(2) ../上级目录
10、 App() 与behaviors组件间状态共享的区别:
(1)① App() 必须在 app.js 中调用,必须调用且只能调用一次(实例一次,比如如果两个页面都调用了App(),其中的一个参数在一个页面里修改,那会导致全部页面调用的数据都修改了)。不然会出现无法预期的后果。
②App()里可以调用方法和属性,在 globalData:{}里写方法和属性。
(2)①behaviors 是用于组件间代码共享的特性(可以实例多次,相当于代码复制。比如两个组件调用了该behaviors 文件,相当于两个实例,如果其中一个实例中的参数改变,另一个组件里的实例的参数不会变化的),每个 behavior 可以包含一组属性、数据、生命周期函数和方法,组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior 。 behavior 也可以引用其他 behavior 。具体功能参考api文档。
11、父组件与子组件之间的通信:(1)子组件传递数据给父组件时:一般情况下是会触发某种事件的,导致数据(在子组件里)变化的:你每次改值的时候要触发组件里的自定义组件事件函数给父级监听。
例如:index.wxml页面:
<list listdata="{{listdata}}" bind:addData="adddata"></list>
<addBtn listdata="{{listdata}}"></addBtn>
addBtn.wxml页面:
<view>
<button catchtap='add'>添加</button>
</view>
addBtn.js:
Component({
options: {
},
properties: {
listdata: {
type: Array, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: [], // 属性初始值(可选),如果未指定则会根据类型选择一个
observer: function (newVal, oldVal, changedPath) {
var that = this;
that.setData({
listdata: newVal
})
}
}
},
methods: {
add:function(e){
var that = this;
console.log(that.data.listdata);
}
}
})
addBtn.json:
{
"component": true,
"usingComponents": {}
}
list.wxml:
<view>
<ul>
<li wx:for="{{listdata}}" wx:key="index">
{{item}}<text catchtap='adddata' data-value="{{item}}" data-index="{{index}}">+</text>
</li>
</ul>
</view>
list.json:
{
"component": true,
"usingComponents": {
}
}
list.js:
Component({
options: {
},
properties: {
listdata:{
type: Array, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value:[], // 属性初始值(可选),如果未指定则会根据类型选择一个
observer: function (newVal, oldVal, changedPath) {
var that=this;
that.setData({
listdata: newVal
})
}
}
},
methods: {
adddata:function(e){
var index=e.currentTarget.dataset.index;
var valuetxt = e.currentTarget.dataset.value;
var that =this;
var curlistdata={
index:index,
curdata: valuetxt
}
this.triggerEvent('addData', curlistdata);
}
}
})
index.json:
{
"usingComponents": {
"list": "/components/list/list",
"addBtn": "/components/addBtn/addBtn"
}
}
index.js:
Page({
/**
* 页面的初始数据
*/
data: {
listdata:[11,12,16]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
adddata:function(e){
var index=e.detail.index;
var datavalue = e.detail.curdata+1;
var that=this;
var listdata = that.data.listdata;
listdata[index] = datavalue;
that.setData({
listdata
})
console.log(that.data.listdata);
}
})
12、去除button自带的的边框:
button::after{
border: none;
}