Preface
The previous series of articles:
- Chapter 1-Use of v Command
- Chapter 1-Custom Instructions
- Chapter 2-Computational Properties
- Chapter 2-Listening Properties
- Chapter 2-Filter
Vue has two major features
- Progressive
- Component
Progressive is the underlying design of Vue. We don't care about it first. Chapter 3 focuses on the use of components. Like instructions and filters, components can be divided into local components and global components, and their definitions are similar.
Basic example
Before the actual introduction component, let me introduce Vue.extend({Object} options) . Vue.extend()Using the basic Vue constructor, create a "subclass", the parameter is an object containing component options. The data option is a special case, you need to pay attention-it must be a function in Vue.extend(). Later, I will introduce why the data here is not an object but a function.
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建构造器
var Profile = Vue.extend({
template: '<p>{
{firstName}} {
{lastName}} aka {
{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#app')
</script>
</body>
<!--
渲染结果：
Walter White aka Heisenberg
-->
I created one above Vue.extend()and $mountmounted it to the DOM, but it seems that it can only be used once in this way. If you use the component, there will be no such problem, because the component can be reused.
<body>
<div id="app">
<my-component></my-component>
<my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建构造器
var Profile = Vue.extend({
template: '<p>{
{firstName}} {
{lastName}} aka {
{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
// new Profile().$mount('#app')
Vue.component("my-component",Profile)
// 创建Vue实例
var app = new Vue({
el: '#app'
})
</script>
</body>
<!--
Walter White aka Heisenberg
Walter White aka Heisenberg
-->
The above is one of the Vue.componentmost basic components used to create, which means they can be used in any newly created Vue root instance new Vue()template after registration . First of all, the first parameter is the name of the component we need to define. This can be named with a dash (as in the example), or "camel case naming". If "camel case naming" is used, then in the process of use The middle must be changed to the form of a dash. Of course, if it is in the string template (backquote, ``selected, such as the above template), there is no such restriction, as follows:
<body>
<div id="app">
<p>+++++++++++</p>
<myComponent></myComponent>
<p>+++++++++++</p>
<my-component></my-component>
<p>+++++++++++</p>
<test></test>
<p>+++++++++++</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var Profile = Vue.extend({
template: '<p>{
{firstName}} {
{lastName}} aka {
{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
Vue.component("myComponent",Profile)
// 简写
Vue.component("test",{
template: '<myComponent></myComponent>',
})
new Vue({
el: '#app',
})
</script>
</body>
<!--
渲染结果：
+++++++++++
+++++++++++
Walter White aka Heisenberg
+++++++++++
Walter White aka Heisenberg
+++++++++++
-->
Three components are declared in the div. The first is named "camel case", the second is named by a dash, and the third is named "camel case" in the string template. According to the results, we can see that the first one is not displayed, and the others can be displayed normally. In the newly defined test component, there is no declaration Vue.extand()but an object instead. In fact, the latter is a shorthand for the former. After getting familiar with it, you can declare a global component like this:
Vue.component('my-component-name', {
/* ... */ })
Partial registration
<body>
<div id="app">
<profile></profile>
<my-com></my-com>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
components:{
profile:{
template:`<h1>profile</h1>`
},
"my-com":{
template:`<h1>myComponent</h1>`
}
}
})
</script>
</body>
In the Vue instance, an componentsattribute object is defined , and the Vue,extand()same, we only need to implement the component in the form of an object. It should be noted that the dash name needs to be wrapped in quotation marks.
Other knowledge
You may have noticed that using string templates to write html is really hard to explain. Vue also provides us with a new tag <template></template>. We only need to specify the id of the template tag and quote it directly:
<!--html-->
<template id="html">
<div>
<p>大风起兮云飞扬</p>
<p>维加海内西归故乡</p>
</div>
</template>
<!--javascript-->
Vue.component("my-template",{
template: "#html"
})
It is worth noting that if there are multiple labels in the template, you need to wrap it with one label, and then write it inside, as above <div></div>.
What if you want to control the switching (display|disappear) of the two components? Certainly subconsciously you will think of using if and show two instructions, of course, but Vue also provides an is attribute for the component to achieve this effect. Of course, the is attribute is not enough, it needs to be used with the <component></component>label:
<body>
<div id="app">
<button @click="myButton">切换</button>
<keep-alive>
<component :is="componentName"></component>
</keep-alive>
</div>
<template id="template">
<div class="temp">
<h1>雕栏玉砌应犹在</h1>
<h2>雕栏玉砌应犹在</h2>
<h3>雕栏玉砌应犹在</h3>
</div>
</template>
<template id="footer">
<div>
<h1>只是朱颜改</h1>
<h2>只是朱颜改</h2>
<h3>只是朱颜改</h3>
<input type="checkbox">
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("my-component",{
template:"#template"
})
var app = new Vue({
el: '#app',
data: {
componentName:"my-component"
},
methods: {
myButton(){
this.componentName = this.componentName == "my-component" ? "my-footer" : "my-component"
}
},
components:{
"my-footer":{
template:"#footer"
}
}
})
</script>
</body>
The above case can help us to switch between components, which means that is points to the name of the component we want to display.
<keep-alive>
<component :is="componentName"></component>
</keep-alive>
However, as can be seen above <component></component>, there is a layer of label besides the label <keep-alive></keep-alive>, its function is to save the state. A checkbox is defined in the footer component, and this radio button is selected. When the component is switched, if there is no keep-alive tag, the radio button will not be selected. If you want to keep selected, you need to add a <keep-alive></keep-alive>label on the outer layer .
to sum up
The component is actually an Vue()instance, but this instance is a large component. Since the instance is a component, the attribute objects in the instance can also be used in the component, such as the previous methods, computed, watch..., except for data, which is a function in the component, not an object. Because of the reusability of components, if multiple declared components operate on the same piece of data in data, the data will be confused. If you use functions, the multiple components declared will only operate on their own data. For example, if there is an apple (data in data), there are multiple people (multiple components). Previously, multiple people grabbed this apple, and then it was changed to a function. It is equivalent to one person giving an apple, and to prevent jealousy I also put a person in a room, so that only I know what to do with this apple.