En el mundo de Vue, ¿la comunicación entre padre e hijo es como en el mundo real?
Primero cree una relación de componente padre-hijo
<div id="father">
<h1>{
{
name}}</h1>
<son></son>
</div>
<template id="son">
<h2>{
{
name}}</h2>
</template>
const son = {
template:"#son",
data() {
return {
name:'我是你儿子'，
job:'coder'
}
}
}
const father = new Vue({
el:"#father",
data:{
name:'我是你爹',
asset:{
house:'180平方米',
car:'顶配小刀电动车',
money:'50块钱'
}
components:{
son,
}
})
Imprimir en la página
De padre a hijo
-
Pasar accesorios: {}
-
El componente principal coloca los datos utilizados por el componente secundario en los datos, es decir, el componente principal no necesita realizar ningún cambio.
El componente hijo se escribe así
- Los accesorios almacenan los datos pasados por el componente principal.
- formFatherData es el hijo que renombró algo pasado por su padre
- Usaré este nuevo nombre cuando mi hijo lo use
- El tipo en formFatherData significa que el hijo solo necesita el tipo de datos del objeto
const son = {
template:"#son",
data() {
return {
name:'我是你儿子',
job:'coder'
}
},
props:{
formFatherData:{
type:Object
}
}
}
El hijo usa los datos que le pasó papá
- Como puede ver, el hijo usó su nuevo nombre cuando lo usó
<template id="son">
<div>
<h2>{
{
name}}</h2>
<p v-for="item in formFatherData">{
{
item}}</p>
</div>
</template>
El paso mas importante
- Papá decidió pasarle algo a su hijo
- Utilice etiquetas de hijo en el sitio de papá, los atributos de etiqueta no se pueden nombrar con mayúscula
- Activo son los datos que el padre decide pasar a su hijo
<div id="father">
<h1>{
{
name}}</h1>
<son :form-father-data='asset'></son>
</div>
Mira el efecto impreso en la página.
Cuando el hijo usa los datos de papá, puede hacer una pequeña solicitud
- Comprobación de tipo básica ('nulo' coincide con cualquier tipo)
// 属性名:Number
car: String
// null 匹配任何类型
- Múltiples tipos posibles
// 属性名:[类型，类型]
car:[String,Number]
- El valor requerido es verdadero para indicar que el artículo es obligatorio.
属性名:{
type:属性类型，
require：true
}
- Establecer predeterminado
属性名：{
type:属性类型，
default:值
}
- Objeto con valor predeterminado, o cuando es una matriz, el valor predeterminado debe ser una función
属性名：{
type：Object,
default:function() {
return {
"key":"value" }
}
}
- El valor pasado debe ser uno de estos
属性名:{
validator:function() {
return ['值1'，'值2'，'值3'].indexOf(value) !== -1
}
}
-
Tipo personalizado
先定义这个自定义类型
function 自定义类型名(形参) {
this.实参 = 形参
}
使用这个自定义类型
props:{
author:自定义类型名
}
Pasar de hijo a padre
- Pasar por un evento personalizado
o crear una relación padre-hijo primero.
Cuando el componente secundario hace clic en el botón, el componente principal mostrará en qué botón se hizo clic
<div id="father">
<h1>{
{
name}}</h1>
<son></son>
</div>
<template id="son">
<div>
<h2>{
{
name}}</h2>
<button v-for="(item,index) in btnlist">{
{
item.val}}</button>
</div>
</template>
const son = {
template:'#son',
data(){
return {
name:'我是儿子',
btnlist:[
{
id:1,val:'第一个'},
{
id:2,val:'第二个'},
{
id:3,val:'第三个'},
{
id:4,val:'第四个'}
]
}
},
}
const father = new Vue({
el:"#father",
data:{
name:'我是你爹',
},
components:{
son
}
})
- Eche un vistazo al efecto página
- Agregue un evento de clic al botón en el hijo.
BtnClick es el método llamado después de hacer clic, y el elemento es el parámetro pasado
<button v-for="(item,index) in btnList" @click='btnClick(item)'>{
{
item.val}}</button>
- Pasar datos a papá a través de $ emit
- formSonData es el nombre del evento personalizado. Papá escuchará este evento más tarde
- elemento son los datos pasados a papá
- Es molesto que las etiquetas html no admitan joroba
const son = {
//.......
methods:{
btnClick(item) {
this.$emit('formsondata',item)
}
}
}
El padre escucha el evento personalizado por el que pasa su hijo. GiveMeData es el método llamado después de que se escucha el evento personalizado
. Los parámetros se reciben y se mostrarán en la etiqueta del intervalo.
<div id="father">
<h1>{
{
name}}</h1>
<span>{
{
sonDataId}}</span><span>{
{
sonDataVal}}</span>
<son @form-son-data='giveMeData'></son>
</div>
const father = new Vue({
el:"#father",
data:{
name:'我是你爹',
sonDataId:'',
sonDataVal:''
},
methods:{
giveMeData(item) {
console.log('我接收到参数了')
this.sonDataId = item.id
this.sonDataVal = item.name
}
}，
components:{
son
}
})
Mira el efecto
