Tabla de contenido
prefacio
En primer lugar, este artículo estaba dirigido por un montón de códigos incorrectos...
//需求：实现父组件向子组件传递数据
<body>
<div id="app">
<child :message="parentMsg"></child>
</div>
<template id="child">
<div>
{
{
message}}
</div>
</template>
<script>
// 最初写法================================报错
// Vue.component('child', {
// template: '#child',
// data() {
// return {}
// },
// props: {
// message: {
// type: String,
// default: 'aaaaaa'
// }
// }
// })
// ================================报错
// 正确写法================================
const child = Vue.extend({
template: '#child',
data() {
return {
}
},
props: {
message: {
type: String,
default: 'aaaaaa'
}
}
})
// 正确写法================================
const app = new Vue({
el: "#app",
data: {
parentMsg: '我是父组件parentMsg'
},
methods: {
},
components: {
child },
})
</script>
</body>
Como era de esperar, de acuerdo con la redacción original, el resultado será una serie de explosiones—— vue.js:634 [Vue warn]: Failed to mount component: template or render function not defined., lo que significa que el componente de montaje falló: la plantilla o función de representación no está definida. No se asuste, habrá una solución si hay un error, ¡investiguemos un poco!
Primero, déjame explicarte por qué escribí esto en primer lugar, hay dos razones:
- Sé
Vue.componentque es una de las formas de crear componentes, pero erróneamente pensé que era una forma abreviada (todavía lo estaba pensando cuando lo escribí, no es una forma abreviada, sigue siendo tan complicado, e incluso por un momento no pude decir si era un componente o un componente Constructor) - involucrando el alcance del conocimiento:La distinción entre componentes y constructores de componentes.。 - Sé claramente que
Vue.componentlos componentes globales se pueden crear a través de , y ¿no están disponibles los componentes globales para todos los componentes? Luego, haré componentes en el componente raíz por qué no se puede hacer (¡incluso soy súper "razonable"!), Involucrando el alcance del conocimiento:El uso de componentes globales y componentes locales.。
Lo admito, es un poco escandaloso~
Bien, después de analizar la causa del error, ¡echemos un vistazo a la relación entre ellos!
Componente: Vue. componente ()
Primero escribamos un caso de un componente:
<body>
<div id="app">
<!-- 3、使用组件 -->
<my-cpn></my-cpn>
</div>
<script>
// 1、创建组件构造器对象
const cpnC = Vue.extend({
template: `
<div>
<h2>早上好！</h2>
<p>中午好！</p>
<p>晚上好！</p>
</div>`
})
// 2、注册组件
Vue.component('my-cpn', cpnC)
//根组件
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
})
</script>
</body>
Hay tres pasos para crear componentes en vue.js:
-
Definir componentes -
- Método 1: La llamada
Vue.extend()crea un constructor de componentes.Por lo general, al crear un constructor de componentes,templatese pasa una plantilla que representa nuestro componente personalizado, a saberconst cpnC = Vue.extend({ template:' ' }); - Método 2: Utilice
Vue.component('组件名称',{ 组件构造器 })la creación directa de componentes (componentes globales).
- Método 1: La llamada
-
Registrar componente -
- Componentes globales: Al
Vue.component('标签名', 组件名)registrar componentes, el registro de componentes es global; - Componentes locales: los componentes registrados se montan en una instancia, a saber:
- Componentes globales: Al
const app = new Vue({
el: "#app",
// 注册局部组件
components: {
// cpn使用组件时的标签名，cpnC组件名
cpn: cpnC
}
})
- Consumir componentes: consumir componentes dentro del alcance de la instancia de Vue.
Constructor de componentes: Vue.extend()
extend crea un constructor de componentes, no una instancia de componente específica, por lo que no se puede usar directamente.
El constructor de componentes es equivalente a la segunda parte del parámetro del método Vue.component()
La forma correcta de abrir el constructor de componentes (uso efectivo):
Uso 1: Registrar
Uso 2: Montar
Abreviatura de constructores de componentes:
//正常写法：
const child = Vue.extend({
template: '#child',
data() {
return {
}
},
props: {
message: {
type: String,
default: 'aaaaaa'
}
}
})
//简写形式：
const child = {
template: '#child',
data() {
return {
}
},
props: {
message: {
type: String,
default: 'aaaaaa'
}
}
}
componente global
Método 1: crear componentes a través de constructores y Vue.component('标签名', 组件名)registrar componentes
<body>
<div id="app">
<!-- 3、使用组件 -->
<my-cpn></my-cpn>
</div>
<script>
// 1、创建组件构造器对象
const cpnC = Vue.extend({
template: `
<div>
<h2>早上好！</h2>
<p>中午好！</p>
<p>晚上好！</p>
</div>`
})
// 2、注册全局组件
Vue.component('my-cpn', cpnC)
//根组件
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
})
</script>
</body>
Método 2: Utilice Vue.component('组件名称',{ 组件构造器 })la creación directa de componentes (componentes globales)
<body>
<div id="app">
<cpn1></cpn1>
</div>
<script>
// 1.创建组件构造器对象
// const cpnC1 = Vue.extend()
// 2.注册组件
Vue.component('cpn1', {
template: `
<div>
<h2>你好吗</h2>
<p>你好嘛</p>
<p>你好么</p>
</div>`
})
// 根组件
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
})
</script>
</body>
Aviso:
- El registro global debe escribirse antes de crear el objeto de instancia de Vue;
- Los componentes globales se pueden escribir directamente como etiquetas personalizadas en el nodo dom vinculado a la instancia de vue;
- ¡Los componentes globales se pueden usar directamente en otros componentes sin importar ni registrar! ! !
componentes locales
<body>
<div id="app">
<!-- 3、使用组件 -->
<cpn></cpn>
</div>
<script>
// 1、创建组件构造器对象
const cpnC = Vue.extend({
template: `
<div>
<h2>早上好！</h2>
<p>中午好！</p>
<p>晚上好！</p>
</div>`
})
//根组件
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
// 2、注册全局组件
components: {
// cpn使用组件时的标签名
cpn: cpnC
}
})
</script>
</body>
Nota: ¡ Al usar componentes parciales, deben registrarse en el atributo de componentes antes de que puedan usarse! ! !
Si está mal, por favor corrígeme!
