Comunicación entre componentes.
El componente personalizado debe tener un elemento raíz
Los datos de los componentes primarios y secundarios no se pueden compartir
Los componentes pueden tener datos, métodos, calculados ..., pero los datos deben ser una función
accesorios pasan datos
El alcance de la instancia del componente está aislado, el componente primario no puede usar directamente los datos del componente secundario, ni el componente secundario puede usar directamente los datos del componente primario
Cuando el componente principal utiliza el componente secundario en la plantilla, puede pasar datos al componente secundario
<bbb money="2"></bbb>
Los subcomponentes solo se pueden usar después de recibirlos a través de la propiedad de accesorios
'bbb':{
props:['money']
}
Si el nombre de la clave es '-' cuando el componente primario pasa el atributo al componente secundario, el componente secundario se escribe como un pequeño modo camello cuando lo recibe
<bbb clothes-logo='amani' clothes-price="16.58"></bbb>
props:['clothesLogo','clothesPrice'] 子组件模板中：{{clothesLogo}}
Podemos usar v-bind para vincular dinámicamente prop a los datos del componente padre. Siempre que los datos del componente primario cambien, el cambio también se transmitirá al componente secundario
Ejemplo 1:
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<p>这是father组件！---> {{pMsg}}</p>
<son :p-msg="pMsg"></son>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
// 父组件给子组件传递数据的时候，
//子组件需要利用props的属性来确定自己的预期数据
//中间有- 需要写出驼峰的形式来接收
//如果儿子没有通过props属性接受传递过来的数据，则数据会以自定义属性的方式,放在儿子最外层的根元素上面
//为什么组件中的data必须是一个函数返回对象的形式？
//目的是让每一个实例可以维护一份被返回对象的独立的拷贝 （每个组件使用到的数据地址不一样）
//内部必须要返回一个对象的写法，这样就可以保证每个组件里面用到的数据对象都是唯一的。
//组件之间的作用域是相互独立的，组件的数据默认只能组件的模板里面使用。
// var json = {pMsg:"hello father"}
Vue.component("father",{
template:"#father",
data:function(){
return {
pMsg:"hello father"
}
},
components:{
son:{
template:"<div>这是son子组件... {{pMsg}}</div>",
props:["pMsg"] //接受父组件传递来的属性
}
}
})
let vm = new Vue({
el: '#app',
data:{
msg:"hello app!"
}
})
</script>
Ejemplo 2
Ejemplos:
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<input type="text" v-model="sky">
<son :sky="sky"></son>
</div>
</template>
<template id="son">
<div>
<input type="text" v-model="color">
<div class="box" :style="{background:ownColor}"></div>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
//父组件可以通过v-bind来为子组件传递数据，当父组件的数据改变的时候，
//子组件接收到的数据也会改变
new Vue({
el:"#app",
components:{
father:{
template:"#father",
data(){
return {
sky:"sky"
}
},
components:{ //声明父组件的子组件
son:{
template:"#son",
props:["sky"], //接收父组件传递来的数据 <son :sky="sky"></son>
data(){ //让每个组件拥有一份被返回对象的独立的拷贝
return {
color:"blue"
}
},
computed:{
ownColor(){ //props和data里面的数据，必须要通过this才可以访问到
return this.sky + this.color
}
}
}
}
}
}
})
</script>
Flujo de datos unidireccional
La propuesta está unidireccionalmente unida: cuando las propiedades del componente primario cambian, se pasará al componente secundario, pero no al revés. Esto es para evitar que el componente secundario modifique inadvertidamente el estado del componente primario para evitar que el flujo de datos de la aplicación se vuelva incomprensible.
Además, cada vez que se actualiza el componente principal, todos los accesorios del componente secundario se actualizan a los últimos valores. Esto significa que no debe cambiar los accesorios dentro de los subcomponentes. Si haces esto, Vue dará una advertencia en la consola.
Ejemplos:
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<input type="text" v-model="message">
<son :message="message"></son>
</div>
</template>
<template id="son">
<div>
<p>这是子组件</p>
<input type="text" v-model="message">
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
Vue.component("father",{
template:"#father",
data(){
return {
message:"hello world"
}
}
})
Vue.component("son",{
template:"#son",
props:["message"]
})
new Vue({
el:"#app"
})
</script>
Efecto: el
método correcto debe basarse en el tipo de aplicación de entrega de dirección:
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<input type="text" v-model="message.value">
<son :message="message"></son>
</div>
</template>
<template id="son">
<div>
<p>这是子组件</p>
<input type="text" v-model="message.value">
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
//Vue/React单向数据流的体现：数据只能从父级组件流向子级组件
//实现父子间的数据共享，依靠的就是应用类型的地址传递
Vue.component("father",{
template:"#father",
data(){
return {
// message:"hello world"
message:{ //子组件这边的话改的是里面的内容，没有对引用类型的地址进行更改。
value:"hello world"
}
}
}
})
Vue.component("son",{
template:"#son",
props:["message"]
})
new Vue({
el:"#app"
})
</script>
Efecto:
Tenga en cuenta que en JavaScript, los objetos y las matrices son tipos de referencia, que apuntan al mismo espacio de memoria. mensaje: {val: ""}
verificación de utilería
Podemos especificar reglas de validación para el accesorio del componente. Si los datos entrantes no cumplen con los requisitos, Vue emitirá una advertencia. Esto es muy útil para desarrollar componentes para que otros puedan usar
La verificación se divide principalmente en: verificación de tipo, verificación obligatoria, configuración predeterminada, verificación personalizada
props:{
//类型验证:
str:String,
strs:[String,Number],
//必传验证
num:{
type:Number,
required:true
},
//默认数据
bool:{
type:Boolean,
// default:true,
default:function(){
return true
}
},
//自定义验证函数
//props:["nums"]
props:{
nums:{
type:Number, //[Number,String,Boolean,Array]
validator: function (value) {
return value %2 == 0
}
}
}
}
Cuando el componente primario pasa datos al componente secundario, el componente secundario no recibe, los datos se montarán en el nodo raíz de la plantilla del componente secundario
ranura
Vue proporciona una forma de integrar el contenido del componente principal y la plantilla del componente secundario: distribución de contenido, a través de la ranura para lograr
Ranura anónima
Cuando utilice un componente secundario en un componente primario, escriba el contenido dentro de la etiqueta del componente secundario. Se puede usar en la plantilla del subcomponente
<div id="app">
<hello>
<div>联通卡</div>
<div>移动卡</div>
</hello>
</div>
<template id="hello">
<div>
<slot></slot>
</div>
</template>
Ranura nombrada
Podemos establecer el atributo de espacio para múltiples contenidos escritos por el componente padre en la etiqueta del componente hijo, y colocar el espacio correspondiente en la plantilla del componente hijo usando la etiqueta de espacio con el atributo de nombre.
<div id="app">
<hello>
<div slot="a">联通卡</div>
<div slot="b">移动卡</div>
</hello>
</div>
<template id="hello">
<div>
<slot name="a"></slot>
<slot name="b"></slot>
</div>
</template>
La nueva versión 2.6+ admite v-slot
Cuando se usa v-slot, debe estar en la etiqueta de la plantilla, todos deben prestar atención a este punto
<hello>
<template v-slot:a>
<div>联通卡</div>
</template>
<template v-slot:b>
<div>移动卡</div>
</template>
</hello>
<template id="hello">
<div>
<slot name="a" ></slot>
<slot name="b" ></slot>
</div>
</template>
Acepta la ranura de accesorios con nombre
<div id="app">
<hello>
<template v-slot:a>
<div>联通卡</div>
</template>
<template v-slot:b="info">
<div>移动卡 {{info.msgb}}</div>
</template>
</hello>
</div>
<template id="hello">
<div>
<slot name="a" ></slot>
<slot name="b" :msgb="msg"></slot>
</div>
</template>
Vue.component("hello",{
template:"#hello",
data(){
return {
msg:"你好"
}
}
})
Comunicación entre componentes.
Pasar valores de componentes primarios y secundarios ( accesorios abajo, eventos arriba )
ii. Accesorios de verificación de propiedad: {nombre: Número} Número, Cadena, Booleano, Matriz, Objeto, Función, nulo (tipo ilimitado)
iii) Árbitro
Esto. $ Refs.child
iv. Autobús de eventos
Var bus = nuevo Vue ()
* Monitoreo durante el ciclo de vida montado
扩展
¿Para qué sirve v-once en los componentes?
Renderice elementos y componentes solo una vez . Posteriormente, el elemento / componente y todos sus nodos secundarios se tratarán como contenido estático y se omitirán. Esto se puede usar para optimizar el rendimiento de la actualización.
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>
¿Se puede usar v-model para la comunicación de componentes?
Si Usar la instrucción v-model en el componente es equivalente a enlazar el atributo de valor y monitorear los eventos de entrada.
transición
Vue proporciona una variedad de diferentes efectos de transición de aplicaciones al insertar, actualizar o eliminar DOM.
Vue proporciona un componente de transición para ayudarnos a lograr el efecto de transición. La base es agregar el nombre de clase correspondiente para el dom en el momento especificado cuando el elemento de control está oculto.
Y solo necesitamos escribir el estilo css correspondiente en estos nombres de clase
En la transición de entrada / salida, habrá 6 conmutadores de clase (v representa el valor del atributo de nombre de la transición).
v-enter: define el estado de inicio de la transición. Surte efecto cuando se inserta el elemento y se elimina en el siguiente cuadro.
v-enter-active: define el estado de la transición. Desempeña un papel en toda la transición del elemento, surte efecto cuando se inserta el elemento y se elimina después de completar la transición / animación. Esta clase se puede utilizar para definir el tiempo del proceso de transición, el retraso y las funciones de curva.
v-enter-to: la versión 2.1.8 y superiores definen el estado final de la transición. Surte efecto después de que el elemento se inserte en un marco (al mismo tiempo que se elimina v-enter) y se elimina después de que se completa la transición / animación.
v-leave: define el estado inicial de salida de la transición. Surte efecto cuando se activa la transición de salida y se elimina en el siguiente cuadro.
v-leave-active: define el estado de la transición. Desempeña un papel en todo el proceso de transición del elemento, surte efecto inmediatamente después de que se active la transición y se elimina una vez que se completa la transición / animación. Esta clase se puede utilizar para definir el tiempo del proceso de transición, el retraso y las funciones de curva.
v-leave-to: la versión 2.1.8 y superiores definen el estado final de abandonar la transición. Tiene efecto un cuadro después de que se activa la transición (al mismo tiempo que se elimina v-leave), que se elimina una vez que se completa la transición / animación.
(1) Transición de elemento único / componente
- transición css
- animación css
- Combinado con la biblioteca de animación animate.css
<transition
leave-active-class="animated fadeOut"
enter-active-class="animated slideInLeft">
<p v-if="isShow" class="box"></p>
</transition>
Ejemplos:
<!-- <link rel="stylesheet" href="./base/animate.css"> -->
<style>
.box{
width: 200px;
height: 200px;
background: red;
}
/*abc-enter abc-enter-to*/
.abc-enter{ /*进入开始的时候*/
opacity: 0;
}
.abc-enter-to{ /*进入过程结束的时候*/
opacity: 1;
}
.abc-leave{ /*离开开始的时候*/
opacity: 1;
}
.abc-leave-to{ /*离开过程结束的时候*/
opacity: 0;
}
.abc-enter-active,.abc-leave-active{
transition:all 3s;
}
</style>
<body>
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<div>
<button @click="isShow=!isShow">toggle</button>
<transition name="abc">
<div v-if="isShow" class="box"></div>
</transition>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
//transition组件主要的作用就是可以给元素在某些特定的时刻添加上特定的类名
//transition template 不会被渲染出来
Vue.component("aaa",{
template:"#aaa",
data(){
return {
isShow:false
}
}
})
new Vue({
el:"#app"
})
</script>
(2) Transición de múltiples elementos.
Cuando se cambian los elementos con el mismo nombre de etiqueta, debe establecer un valor único a través del atributo clave para permitir que Vue los distinga, de lo contrario, Vue solo reemplazará el contenido dentro de la misma etiqueta para mayor eficiencia.
(3) Transición de lista (tecla de configuración)
A diferencia de la transición, se presentará como un elemento real: el valor predeterminado es un elemento span. También puede cambiar a otros elementos a través de la función de etiqueta.
Proporcione un valor de atributo clave único
(4) Modo de transición
in-out: 新元素先进行过渡，完成之后当前元素过渡离开
out-in: 当前元素先进行过渡，完成之后新元素过渡进入
<body style="overflow: hidden;">
<div id="app">
<button @click="type='aaa'">A</button>
<button @click="type='bbb'">B</button>
<transition
enter-active-class="animated slideInLeft"
leave-active-class="animated slideOutRight"
mode="out-in"
>
<component :is="type"></component>
</transition>
</div>
</body>
<script src="./base/vue.js"></script>
<script>
// 利用component标签来代替某一个组件，设置is属性为真正组件的名字
//transition组件默认是进入和离开同时发生。
//vue中对于transition提供了过渡模式
//in-out：新元素先进行过渡，完成之后当前元素过渡离开
//out-in：当前元素先进行过渡，完成之后新元素过渡进入。
new Vue({
el:"#app",
data(){
return {
type:"aaa"
}
},
components:{
"aaa":{
template:"<h1>AAAAAAAAAAAAAAA</h1>"
},
"bbb":{
template: "<h1>BBBBBBBBBBBBBBB</h1>"
}
}
})
</script>
Efecto:
