Table of contents
foreword
First of all, this article was led by a bunch of wrong codes...
//需求：实现父组件向子组件传递数据
<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>
Unsurprisingly, according to the original wording, the result will be a string of explosions—— vue.js:634 [Vue warn]: Failed to mount component: template or render function not defined., which means that the mount component failed: the template or rendering function is not defined. Don't panic, there will be a solution if there is a mistake, let's do some research!
First, let me explain why I wrote this in the first place. There are two reasons:
- I know
Vue.componentit's one of the ways to create components, but I mistakenly thought it was a shorthand way (I was still thinking about it when I wrote it, it's not shorthand, it's still so complicated, and even for a moment I couldn't tell whether it was a component or a component Constructor) - involves the scope of knowledge:The distinction between components and component constructors。 - I clearly know that
Vue.componentglobal components can be created through , and aren't global components available to all components? Then I will make components in the root component why it can't be done (I'm even super "reasonable"!) - involving the scope of knowledge:The use of global components and local components。
I admit, it's a bit outrageous~
OK, after analyzing the cause of the error, let's take a look at the relationship between them!
Component: Vue.component()
Let's write a component case first:
<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>
There are three steps to create components in vue.js:
-
Define components -
- Method 1: The call
Vue.extend()creates a component constructor. Usually when creating a component constructor, atemplatetemplate representing our custom component is passed in, namelyconst cpnC = Vue.extend({ template:' ' }); - Method 2: Use
Vue.component('组件名称',{ 组件构造器 })direct creation of components (global components).
- Method 1: The call
-
Register component -
- Global components: When
Vue.component('标签名', 组件名)registering components, the registration of components is global; - Local components: registered components are mounted in an instance, namely:
- Global components: When
const app = new Vue({
el: "#app",
// 注册局部组件
components: {
// cpn使用组件时的标签名，cpnC组件名
cpn: cpnC
}
})
- Consume Components - Consume components within the scope of the Vue instance.
Component constructor: Vue.extend()
extend creates a component constructor, not a specific component instance, so it cannot be used directly.
The component constructor is equivalent to the second parameter part of the Vue.component() method
The correct way to open the component constructor (effective use):
Usage 1: Register
Usage 2: Mount
Shorthand for component constructors:
//正常写法：
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'
}
}
}
global component
Method 1: Create components through constructors, and Vue.component('标签名', 组件名)register components
<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>
Method 2: Use Vue.component('组件名称',{ 组件构造器 })direct creation of components (global components)
<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>
Notice:
- Global registration should be written before creating the Vue instance object;
- Global components can be directly written as custom tags under the dom node bound to the vue instance;
- Global components can be used directly in other components without import or registration! ! !
local components
<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>
Note: When using partial components, they need to be registered in the components attribute before they can be used! ! !
If wrong, please correct me!
