Importar componentes
-
componente global
Configure usingComponents en el archivo app.json , varios componentes están separados por comas y el último no agrega una coma
-
Componentes utilizados en una sola página
Configurar usando Componentes en el archivo .json de la página
"usingComponents": { "myConponent": "./xxx/xxx" }Después de la configuración, el componente se puede utilizar en la página.
<myConponent></myConponent>Nota: El nombre del componente se puede escribir en mayúsculas pequeñas o en un guión separador. Cuando se introduce un componente personalizado en un archivo json, el nombre de mayúsculas y minúsculas no se puede convertir automáticamente a formato -. Por lo tanto, los nombres de los componentes deben estar unificados al definir, registrar y referenciar,
<myConponent></myConponent>y<my-conponent></my-conponent>corresponder a diferentes componentes.
1. Pasar datos del componente principal al componente secundario: enlace de datos WXML
Algunas propiedades de componentes personalizados se pueden registrar en las propiedades del componente secundario , y el componente principal puede pasar valores a las propiedades personalizadas en las propiedades al llamar al componente secundario.
Component({
properties: {
personObj: {
type: Object,//定义传入属性值的类型
value: {
},//定义默认属性值
}
},
data: {
number:1
},
})
Si hay datos en el componente principal:
data: {
person:{
name:"sun",
age:10
}
},
Cuando el componente principal llama al componente secundario, puede pasar valores a las propiedades en las propiedades del componente secundario
<childDemo personObj="{
{person}}"></childDemo>
Los valores de atributo recibidos se pueden usar en subcomponentes como sus propios atributos
<view>我是子组件内容</view>
<view>{
{personObj.name}}</view>
<view>{
{personObj.age}}</view>
Nota: Estos enlaces de datos solo pueden pasar datos compatibles con JSON.
En segundo lugar, el componente secundario pasa datos al componente principal: enlace de evento triggerEvent()
El componente secundario envía un evento que el componente principal puede escuchar a través del método this.triggerEvent()
La página del componente principal puede escuchar los eventos del componente secundario y obtener datos del componente secundario. Los componentes secundarios también desencadenan métodos de componentes principales de esta manera.
Código wxml de subcomponente
<button bindtap="onTap">点击这个按钮将触发父组件“myevent”事件</button>
Código js del subcomponente
onTap: function(){
var myEventDetail = {
valueA: 1,
valueBB: 2
} // detail对象，包含需传递给父组件的数据，提供给事件监听函数，可选参数
var myEventOption = {
} // 触发事件的选项，可选参数。
this.triggerEvent('myevent', myEventDetail, myEventOption)
},
código wxml del componente principal
<childDemo bind:myevent="myeventListener"></childDemo>
código js del componente padre
myeventListener: function (recivedEvent) {
console.log(recivedEvent)
console.log(recivedEvent.detail);//{valueA: 1, valueBB: 2}
},
3. El componente principal accede a los datos del componente secundario: selectComponent()
El componente principal puede this.selectComponent('id或class选择器')acceder directamente a cualquier dato y método del componente secundario al obtener el objeto de instancia del componente secundario.
Si el subcomponente childDemo tiene los siguientes datos y métodos
data: {
number:1
},
methods: {
log: function () {
console.log("子组件方法");
}
}
Hacer referencia al componente secundario en el componente principal
<childDemo id="childDemo"></childDemo>
Código js del componente principal:
handleTap: function () {
let childObj = this.selectComponent('#childDemo')//获取子组件实例对象
console.log(childObj.data.number);//访问子组件实例属性
this.selectComponent('#childDemo').log()//访问子组件实例方法
},
Cuarto, use para < slot >insertar contenido en subcomponentes
Se puede proporcionar un <slot>nodo para hospedar los nodos secundarios proporcionados cuando se hace referencia al componente.
Plantilla de componente secundario:
<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>
plantilla de componente principal
<view>
<component-tag-name>
<!-- 这部分内容（整个标签）将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件 slot 中的内容</view>
</component-tag-name>
</view>