Prefácio
No artigo anterior, foi introduzido o registro de componentes, incluindo registro local e registro global. Aqui irá apresentar os componentes pai-filho e a comunicação entre os componentes pai-filho.
Componente pai-filho
O componente pai-filho, como o nome indica, deve aplicar componentes para formar uma relação pai-filho no componente. Um exemplo simples é o seguinte:
<body>
<div id="app">
<father> </father>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
components:{
father:{
template:`
<div>
<h1>父组件</h1>
<child></child>
</div>`,
components: {
child:{
template:`<h1>子组件</h1>`
}
}
}
}
})
</script>
</body>
A descrição acima é a definição do componente pai-filho mais simples. Mencionei que a instância é um componente, portanto, as propriedades do objeto na instância também podem ser declaradas no componente. Definir o objeto pai-filho é relativamente simples, vamos falar sobre como o componente pai-filho transmite dados.
Os componentes pai e filho passam dados
Primeiro introduza um atributo props, é um array, a função é receber o valor passado em:
<body>
<div id="app">
<father title="这里是标签"> </father>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
components:{
father:{
props:["title"],
template:`
<div>
<h1>父组件</h1>
<h1>{
{title}}</h1>
<child></child>
</div>`
}
}
}
})
</script>
</body>
<!--
渲染效果：
父组件
这里是标签
-->
Declaramos diretamente uma variável na tag do componente para receber o valor e, ao mesmo tempo, usamos props para recebê-lo e, por fim, podemos aplicar diretamente à sintaxe suportada pelo Vue. Embora apenas uma string seja passada, na verdade ela pode passar todos os tipos de JavaScript. Como o formato de nomenclatura de componentes, "nomeação de camelo" pode ser usada em JavaScript, mas os traços precisam ser usados em html, exceto para strings de modelo.
Assim, já sabemos que podemos passar um valor estático para prop como este:
<father title="这里是标签"> </father>
Prop também pode ser atribuído dinamicamente via v-bind, por exemplo:
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>
Depois de sabermos a transferência de valor dinâmico, o resto é fácil, porque o valor de transferência do componente pai-filho depende da atribuição dinâmica v-bind:
new Vue({
el: '#app',
components:{
father:{
data(){
return{
msg:"白月光与朱砂痣"
}
}
template:`
<div>
<h1>父组件</h1>
<child :msg="msg"></child>
</div>`,
components: {
child:{
props:["msg"],
template:`<h1>子组件{
{msg}}</h1>`
}
}
}
}
})
Conforme mostrado acima, os dados msg são primeiro definidos no componente pai e, em seguida, vinculados aos subcomponentes passando valores dinamicamente, então os parâmetros passados são recebidos com props e, finalmente, renderizados na sintaxe de interpolação.
Método de transferência de componente pai-filho
new Vue({
el: '#app',
components:{
father:{
data(){
return {
msg:""
}
},
methods:{
fatherFunction(value) {
this.msg=value
alert("白月光与朱砂痣"+value)
}
},
template:`
<div>
<h1>父组件 {
{msg}}</h1>
<child @father-function="fatherFunction"></child>
</div>`,
components: {
child:{
template:`<h1 @click="childFunction">子组件</h1>`,
methods:{
childFunction(){
this.$emit("father-function","，你想起她的好")
}
}
}
}
}
}
})
Acima, duas funções são realizadas principalmente, uma é passar o método do componente pai para o componente filho, e a outra é passar os dados do componente filho para o componente pai.
Ao passar o método, as propriedades precisam v-onser especificadas. Ao contrário dos componentes e adereços, o nome do evento não será usado como um nome de variável ou propriedade JavaScript, portanto, não há razão para usar "nomenclatura de camelo". E os v-onouvintes de evento são automaticamente convertidos no modelo DOM para todas as letras minúsculas (uma vez que o HTML não faz distinção entre maiúsculas e minúsculas), ele v-on:myEventse tornará v-on:myevent- fazer com que o myEvent não esteja escutando, portanto, quando o traço de recomendação de transferência de memória, Line naming, "camel case naming" não funciona.
Depois de ser passado para o subcomponente, o subcomponente precisa definir outro método, e o método no subcomponente é this.$emit("事件名")"chamado. O primeiro parâmetro é o nome do método e os parâmetros a seguir são os atributos do método. Aqui, uma string é passada e os dados são passados para os dados no componente pai chamando o componente pai por meio do componente filho.