Comunicação do componente pai-filho
Compreensão:
por que a opção de dados é uma função?
Um componente é um agregado e um todo. Ele precisa de um espaço de função independente, ou seja, seus dados precisam ser independentes. Atualmente, a maior característica do js é a programação funcional, e a função apenas fornece um escopo independente, então nós é uma função fora do componente raiz.
Compreensão: por que a função de dados precisa retornar um valor de retorno? O valor de retorno ainda é um objeto, não uma matriz?
Vue usa a propriedade Object.definePerproty de ES5 para definir o getter e setter de um objeto, e a opção de dados é uma opção para Vue de ir profundamente no núcleo responsivo.
Processo
O componente pai vincula seus próprios dados com v-bind ao componente filho, e o
componente filho os recebe por meio do atributo props
<template id="father">
<div>
<h3> 这里是father </h3>
<Son :money = "money"></Son>
</div>
</template>
<template id="son">
<div>
<h3> 这里是son </h3>
<p> 我收到了父亲给的 </p>
</div>
</template>
<script>
Vue.component('Father',{
template: '#father',
data () {
return {
money: 10000
}
}
})
Vue.component('Son',{
template: '#son',
props: ['money']
})
new Vue({
el: '#app'
})
</script>
Verificação de dados de atributos de adereços
Verifique o tipo de
dados Verifique o tamanho dos dados [condição de julgamento]
// props: ['money']
// 数据验证
// props: {
// 'money': Number
// }
props: {
'money': {
validator ( val ) { // 验证函数
return val > 2000
}
}
}
No trabalho: validador de vue do plug-in
TypeScript [TS] de verificação de terceiros
, etc.