1. Mecanismo de componentes
Los componentes son una de las características más poderosas de Vue.js. Los componentes pueden extender elementos HTML, encapsulando código reutilizable. En un nivel alto, los componentes son elementos personalizados a los que el compilador de Vue agrega una funcionalidad especial. En algunos casos, los componentes también pueden aparecer como elementos HTML nativos ampliados con el atributo is. Cuando se registra un componente, se deben especificar varios parámetros para el componente.
Debido a que los componentes son instancias de Vue reutilizables, reciben las mismas opciones que el nuevo Vue, como datos, computado, observación, métodos y enlaces de ciclo de vida. Las únicas excepciones son las opciones específicas de la instancia raíz como el.
### 组件的特点
* 组件可以进行任意次数的复用。
* 组件的data必须是一个函数，确保每个实例可以维护一份被返回对象的独立的拷贝，也就是任何一个组件的改变不会影响到其他组件。
let component = {
data () {
return {
count: 0 }
},
template: '<button v-on:click="count++">You clicked me {
{ count }} times.</button>'
}
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
2. Registro de componentes
Para usar componentes, primero debe registrar componentes
Registro global
Puede usar Vue.component(tagName, opciones) para registrar un componente global, que se puede usar en la plantilla de cualquier instancia raíz de Vue recién creada
Vue.component('my-component-name',component)registro parcial
Los registros globales son a menudo menos que ideales. Por ejemplo, si usa un sistema de compilación como webpack, registrar todos los componentes globalmente significa que, incluso si ya no usa un componente, aún se incluirá en su compilación final. Esto crea un aumento innecesario en JavaScript descargado por los usuarios. Los componentes registrados parcialmente solo se pueden usar en el componente actual
Componentes globales -> Variables globales
Componentes locales -> Variables locales
全局注册
### js代码
// 1.创建组件
let mycom = {
data() {
return {
Commsg: '组件数据'
}
},
methods:{
changeObj(){
if(this.Commsg==='组件数据'){
this.Commsg='修改后的组件数据'
}else{
this.Commsg='组件数据'
}
}
},
// 模板
template: `
<div>
<br>
组件使用
<br>
-------------------------
<br>
<span>{
{Commsg}}</span>
<span>{
{Commsg}}</span>
<button @click='changeObj'>更改数据模型中的数据</button>
</div>
`
};
// 全局注册
Vue.component('my-com',mycom)
new Vue({
el: '#app',
data: {
}
})
### html代码
<div id="app">
<my-com></my-com>
<my-com></my-com>
<my-com></my-com>
</div>
### 局部注册
### html代码
<div id="app">
<my-com-b></my-com-b>
--------------------
<my-com-a></my-com-a>
</div>
### js代码
// 创建组件
let myComA={
// 模板
template:`
<div>A组件</div>
`
};
let myComB={
components:{
'my-com-a':myComA
},
// 模板
template:`
<div>B组件
<my-com-a></my-com-a>
</div>
`
};
//全局注册
// Vue.component('my-com-a',myComA)
Vue.component('my-com-b',myComB)
new Vue({
components:{
'my-com-a':myComA
},
el:'#app',
data:{
}
})
3. Interacción de componentes/comunicación/transmisión de valor
El componente A utiliza el componente B en su plantilla. Deben comunicarse entre sí: el componente principal puede enviar datos al componente secundario y el componente secundario puede informar al componente principal de lo que sucedió dentro de él. En Vue, la relación entre los componentes principal y secundario se puede resumir a medida que se transmiten los accesorios y los eventos. El componente principal envía datos al componente secundario a través de accesorios y el componente secundario envía mensajes al componente principal a través de eventos.
1. Use los datos del componente principal principal-secundario en el componente secundario
1. El componente principal pasa datos al componente secundario (se pueden pasar propiedades estáticas y propiedades dinámicas)
2. Los subcomponentes reciben y procesan datos
{
accesorios:['título','mensaje','atributo],
plantilla:``
}
2. Usar los datos del componente secundario en el componente principal
Evento emitir evento personalizado
Emitir en componente hijo Recibir en componente padre
Tiempo de lanzamiento del subcomponente
1. Botón de envío manual
2. Supervise los cambios de datos en los subcomponentes y luego emita
在子组件内监听comMsg的变化，this.$emit('',this.comMsg)La llamada del controlador de eventos del componente principal puede cambiar los datos en el modelo de datos del componente principal y reflejarlo sincrónicamente en la vista del componente principal.
### 父组件传递数据给子组件
### html代码
<div id="app">
<!-- 父组件给子组件传递数据 -->
<my-com :msg='msg' title='父组件向子组件传值' attr-a='父组件给自组件的静态数据'></my-com>
</div>
### js代码
// 创建组件
let myCom={
// 接受父组件传递的数据
props:['title','msg','attrA'],
data(){
return {
}
},
template:`
<div>组件通信
<br>
<span>{
{msg}}--{
{title}}--{
{attrA}}</span>
</div>
`
}
new Vue({
components:{
"my-com":myCom
},
el:"#app",
data:{
msg:'我是父组件'
}
})
### 子组件向父组件传递数据
### html代码
<div id="app">
{
{
msg}}
<my-a title='父组件静态数据' :msg='msg' data-attr='父组件静态数据' @my-event='handler'> </my-a>
</div>
</div>
### js代码
<script>
// 创建组件
let myA={
props:['title','msg','dataAttr'],
data(){
return {
subMsg:'子组件数据'
}
},
methods:{
toSend(){
// 参数 第一个参数自定义事件名称 第二个参数传递的数据
this.$emit('my-event',this.subMsg,100)
}
},
template:`
<div>
{
{
subMsg}}--
{
{
msg}}--
{
{
dataAttr}}--
<button @click='toSend'>发射数据</button>
</div>
};
// 全局注册
Vue.component('my-a',myA)
new Vue({
el:"#app",
data:{
msg:'父组件数据'
},
methods: {
handler(a,b){
console.log(a,b)
}
},
})
4. Valor de paso del componente
El componente principal pasa parámetros al componente secundario a través del enlace de propiedades, y el componente secundario declara los parámetros que se espera obtener del componente principal a través de accesorios. El nombre de prop de camelCase (método de nomenclatura de camello) debe nombrarse con su equivalente kebab-case (método de nomenclatura separado por guiones):
Espere que cada accesorio tenga un tipo de valor específico. En este punto, puede enumerar accesorios en forma de objetos, y los nombres y valores de estas propiedades son los respectivos nombres y tipos de accesorios.
Cuando el componente principal proporciona datos al componente secundario, el componente secundario puede definir el tipo de datos Paso de
parámetros estáticos: sin dos puntos, pase una cadena Paso
de parámetros dinámicos: agregue dos puntos, pase un valor de número, booleano, objeto, tipo de matriz , variable
accesorios: { título: cadena, me gusta: número, está publicado: booleano, comentarioIds: matriz, autor: objeto, devolución de llamada: función, contactos Promesa: Promesa // o cualquier otro constructor }
validación de accesorios
Podemos especificar requisitos de validación para accesorios de componentes, como los que conoces. Si no se cumple un requisito, Vue le avisará en la consola del navegador. Esto es especialmente útil cuando se desarrolla un componente que será utilizado por otros.
Vue.component('my-component', { props: { // verificación de tipo básica ( y pasará cualquier tipo de validación) propA: Number, // múltiples tipos posibles propB: [String, Number], // cadena requerida rellenada propC : { tipo: Cadena, requerido: verdadero }, // número con valor predeterminado propD: { tipo: Número, predeterminado: 100 } })
nullundefined
### js代码
// 创建组件
let myA={
props:['title','msg'],
data(){
return {
subMsg:'子组件'
}
},
template:`
<div>
{
{title}}-{
{msg}}
</div>
`
}
Vue.component(
'my-a',myA
)
new Vue({
el:'#app',
data:{
msg:'父组件'
}
})
### html代码
<div id="app">
{
{
msg}}
<my-a title='hello' :msg='msg' ></my-a>
</div>
### html代码
<div id="app">
{
{
msg}}
<!-- <my-a sub-msg="父给子" :stus="[1,2,3]" :is-active="undefined"></my-a> -->
<!-- <my-a sub-msg="父给子" :stus="[1,2,3]" :is-active="true"></my-a> -->
<my-a :msg="msg" sub-msg="父给子" :is-active="true" :age="80"></my-a>
</div>
### js代码
let myA = {
props: {
msg: String,
subMsg: String,
// stus: Array,
stus: {
type: Array,
// 错误
// default: [6, 7, 8]
// 正确 Object/Array要一个工厂函数返回默认值
default() {
return [6, 7, 8];
}
},
// isActive: Boolean
isActive: [String, Boolean],
name: {
type: String,
// 必填项
// required: true
default: "lisi"
},
// 自定义校验规则
age: {
type: Number,
// 校验器
// value 是形参，实参是将来父组件给子组件传递的数据
validator(value) {
/* if(value>50){
return true;
}else{
return false;
} */
return value > 50;
}
}
},
template: `
<div>
{
{subMsg}}
{
{stus}}
{
{isActive}}
{
{name}}
{
{age}}
{
{msg}}
</div>
`
};
Vue.component('my-a', myA);
let vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {
}
})
Flujo de datos unidireccional (dirección de cambio de datos)
El componente padre puede cambiar los datos del componente hijo
El padre puede cambiar el hijo
El componente hijo no puede cambiar los datos del componente padre
El hijo no puede cambiar el padreModifique el mensaje del componente principal y modifique el mensaje del componente secundario, pero no al revés
vm.msg='hello vue' observar cambios en subcomponentes