Importar componentes
-
componente global
Configure usingComponents no arquivo app.json , vários componentes são separados por vírgulas e o último não adiciona uma vírgula
-
Componentes usados em uma única página
Configure usingComponents no arquivo .json da página
"usingComponents": { "myConponent": "./xxx/xxx" }Após a configuração, o componente pode ser usado na página
<myConponent></myConponent>Observação: o nome do componente pode ser escrito em caixa camel pequena ou separador de traço. Quando um componente personalizado é introduzido em um arquivo json, o nome caixa camel não pode ser convertido automaticamente para a forma -. Portanto, os nomes dos componentes devem ser unificados ao definir, registrar e referenciar
<myConponent></myConponent>e<my-conponent></my-conponent>corresponder a diferentes componentes.
1. Passe dados do componente pai para o componente filho: vinculação de dados WXML
Algumas propriedades de componentes personalizados podem ser registradas nas propriedades do componente filho , e o componente pai pode passar valores para as propriedades personalizadas nas propriedades ao chamar o componente filho.
Component({
properties: {
personObj: {
type: Object,//定义传入属性值的类型
value: {
},//定义默认属性值
}
},
data: {
number:1
},
})
Se houver dados no componente pai:
data: {
person:{
name:"sun",
age:10
}
},
Quando o componente pai chama o componente filho, ele pode passar valores para as propriedades nas propriedades do componente filho
<childDemo personObj="{
{person}}"></childDemo>
Os valores de atributo recebidos podem ser usados em subcomponentes assim como seus próprios atributos
<view>我是子组件内容</view>
<view>{
{personObj.name}}</view>
<view>{
{personObj.age}}</view>
Observação: essas vinculações de dados só podem transmitir dados compatíveis com JSON.
Em segundo lugar, o componente filho passa dados para o componente pai: event binding triggerEvent()
O componente filho envia um evento que pode ser ouvido pelo componente pai por meio do método this.triggerEvent()
A página do componente pai pode ouvir os eventos do componente filho e obter dados do componente filho. Os componentes filho também acionam os métodos do componente pai dessa maneira.
Código wxml do subcomponente
<button bindtap="onTap">点击这个按钮将触发父组件“myevent”事件</button>
Código js do subcomponente
onTap: function(){
var myEventDetail = {
valueA: 1,
valueBB: 2
} // detail对象，包含需传递给父组件的数据，提供给事件监听函数，可选参数
var myEventOption = {
} // 触发事件的选项，可选参数。
this.triggerEvent('myevent', myEventDetail, myEventOption)
},
código wxml do componente pai
<childDemo bind:myevent="myeventListener"></childDemo>
código js do componente pai
myeventListener: function (recivedEvent) {
console.log(recivedEvent)
console.log(recivedEvent.detail);//{valueA: 1, valueBB: 2}
},
3. O componente pai acessa os dados do componente filho: selectComponent()
O componente pai pode this.selectComponent('id或class选择器')acessar diretamente quaisquer dados e métodos do componente filho obtendo o objeto de instância do componente filho.
Se o subcomponente childDemo tiver os seguintes dados e métodos
data: {
number:1
},
methods: {
log: function () {
console.log("子组件方法");
}
}
Referenciar o componente filho no componente pai
<childDemo id="childDemo"></childDemo>
Código js do componente pai:
handleTap: function () {
let childObj = this.selectComponent('#childDemo')//获取子组件实例对象
console.log(childObj.data.number);//访问子组件实例属性
this.selectComponent('#childDemo').log()//访问子组件实例方法
},
Quarto, use para < slot >inserir conteúdo em subcomponentes
Um <slot>nó para hospedar os nós filhos fornecidos quando o componente é referenciado.
Modelo de componente filho:
<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>
modelo de componente pai
<view>
<component-tag-name>
<!-- 这部分内容（整个标签）将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件 slot 中的内容</view>
</component-tag-name>
</view>