Vue components of the system
vue.js Since it is a framework, it can not simply complete the task of data template engine, it also provides functional layout of the page. This paper describes the use vue.js be a powerful tool for page layout, vue.js components of the system.
The birth of each new technology, are designed to solve specific problems. Presence of a component is to solve the page layout, and so on a range of issues. vue divided into two components in the global and local component assembly.
First, the global components of registration
After creating a global components by Vue.component (), we can pass in a new Vueroot instance Vue created, this component as a custom element to use.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--第二步，使用-->
<global_component></global_component>
</div>
<script>
// 第一步，注册
Vue.component("global_component", {
template: `
<div>
<h2>Hello Vue</h2>
</div>
`
});
new Vue({
el: "#app",
});
</script>
</body>
</html>1, component parameters
Because components Vue examples are multiplexed, and they new Vuereceive the same options, for example data, computed, watch, methodsand lifecycle hooks and the like. The only exception is like elthis root instance-specific options.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--第二步，使用-->
<global_component></global_component>
</div>
<script>
// 第一步，注册
Vue.component("global_component", {
data: function () {
return {
count: 0
}
},
template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
});
new Vue({
el: "#app",
});
</script>
</body>
</html>2, component reuse
Each instance maintains its own copy of independent data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--第二步，使用-->
<global_component></global_component>
<global_component></global_component>
<global_component></global_component>
</div>
<script>
// 第一步，注册
Vue.component("global_component", {
data: function () {
return {
count: 0
}
},
template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
});
new Vue({
el: "#app",
});
</script>
</body>
</html>Note that when you click the button, each component will maintain its independent count. Because once you use every component, it will have a new instance is created.
3, Data must be a function
must be a function of data, each instance can maintain a separate copy of the returned object can also be written as
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--第二步，使用-->
<global_component></global_component>
<global_component></global_component>
<global_component></global_component>
</div>
<script>
// 第一步，注册
Vue.component("global_component", {
data(){
return {
count: 0
}
},
template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
});
new Vue({
el: "#app",
});
</script>
</body>
</html>Second, the registration of local assemblies
Global registration is often less than ideal. For example, if you use a build like webpack such systems, global registration means that even if all the components that you no longer use a component, and it will still be included in your final build results. This creates unnecessary increase in users to download the JavaScript.
Global component is always there, unless the program ends, if the component is growing, then the program performance space occupied and consumption will be greater.
1, a first use of the sub-assembly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="component-demo">
<!--最后在根元素当中使用它-->
<!--第一种使用方式，会把当前div渲染进DOM-->
<my-header></my-header>
</div>
<script>
// 定义一个局部组件，其实就是一个变量，它是一个object类型
// 属性与全局组件是一样的
let Header = {
template: `
<button @click="count++">{{ count }}</button>
`,
data() {
return {
count: 0
}
}
};
new Vue({
el: "#component-demo",
// 第二部，需要在根实例当中使用它
components: {
'my-header': Header
}
});
</script>
</body>
</html>2, the second use of the sub-assembly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="component-demo">
</div>
<script>
// 定义一个局部组件，其实就是一个变量，它是一个object类型
// 属性与全局组件是一样的
let Header = {
template: `
<button @click="count++">{{ count }}</button>
`,
data() {
return {
count: 0
}
}
};
new Vue({
el: "#component-demo",
// 第二种使用方式，不会将div渲染进DOM，以template为根元素
template: `<my-header></my-header>`,
// 第二步，需要在根实例当中使用它
components: {
'my-header': Header
}
});
</script>
</body>
</html>For the componentsobject of each property, its name is the attribute name from the elements is defined, its value is the attribute options object of this component.
3, a partial component subassembly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
body {
margin: 0;
}
.box {
width: 100%;
height: 50px;
background-color: #2aabd2;
}
</style>
</head>
<body>
<div id="component-demo">
</div>
<script>
// 定义一个局部组件，其实就是一个变量，它是一个object类型
// 这个对象的属性与全局组件是一样的(除el属性外)
let Fcontent = {
template: `
<div>
<span>这是头条</span>
</div>
`
};
let Header = {
template: `
<div v-bind:class='{box: isBox}'>
<button @click="count++">{{ count }}</button>
<first-content></first-content>
</div>
`,
data() {
return {
count: 0,
isBox: true
}
},
components: {
'first-content': Fcontent
}
};
new Vue({
el: "#component-demo",
// 第二种使用方式，不会将div渲染进DOM，以template为根元素
template: `<my-header></my-header>`,
// 第二步，需要在根实例当中使用它
components: {
'my-header': Header
}
});
</script>
</body>
</html>Communication III Sons assembly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
<style>
body {
margin: 0;
}
.box {
width: 100%;
height: 50px;
background-color: #2aabd2;
}
</style>
</head>
<body>
<div id="component-demo">
</div>
<script>
// 定义一个局部组件，其实就是一个变量，它是一个object类型
// 属性与全局组件是一样的
let Fcontent = {
template: `
<div>
<span>这是头条</span>
{{ fdata }}
</div>
`,
props: ['fdata']
};
let Header = {
template: `
<div v-bind:class='{box: isBox}'>
<button @click="count++">{{ count }}</button>
<first-content :fdata="fathData"></first-content>
</div>
`,
data() {
return {
count: 0,
isBox: true,
fathData: "我是你爸爸~~~"
}
},
components: {
'first-content': Fcontent
}
};
new Vue({
el: "#component-demo",
// 第二种使用方式，不会将div渲染进DOM，以template为根元素
template: `<my-header></my-header>`,
// 第二步，需要在根实例当中使用它
components: {
'my-header': Header
}
});
</script>
</body>
</html>Communication between the four child-parent
When mounted the parent component, a self-defined event listener.
After the sub-assembly to bind a click event, through the built-in method $ emit a trigger event on the parent component, this event is the parent component of the custom event listeners.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let myFooter = {
template: `
<div>
<h1>我是儿子</h1>
<button v-on:click="changeFatherSize">点击修改爸爸的字体</button>
</div>
`,
methods: {
changeFatherSize: function () {
this.$emit('change-font', 1);
}
},
};
let myHeader = {
template: `
<div>
<my-footer v-on:change-font="changeSize"></my-footer>
<span :style="{ fontSize: fontSize + 'px'}">我是爸爸</span>
</div>
`,
data(){
return {
fontSize: 26,
}
},
methods: {
changeSize: function (value) {
console.log(value);
this.fontSize += value;
}
},
components: {
'my-footer': myFooter
}
};
let App = {
template: `
<div>
<my-header></my-header>
</div>
`,
components: {
'my-header': myHeader,
},
};
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App
}
})
</script>
</body>
</html>Fifth, the communication between the parallel components
It may communicate through an intermediate component between the parallel Vue example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
<com-main></com-main>
</div>
<script>
let bus = new Vue();
let dogfa = {
template: `
<div>
<button @click="dogfaClick">点击向djb道歉</button>
</div>
`,
methods: {
dogfaClick: function () {
bus.$emit("dogfa_apo", "原谅我吧，请你大保健~~~");
}
},
};
let djb = {
template: `
<div v-show="isShow">原谅你了~~~</div>
`,
mounted () {
bus.$on("dogfa_apo", (dogfasay)=> {
if ( dogfasay ) {
console.log("原谅你了~~~");
}
});
},
data () {
return {
isShow: false
};
}
};
let App = {
template: `
<div id="app">
<dogfa></dogfa>
<djb></djb>
</div>
`,
components: {
dogfa,
djb
}
};
new Vue({
el: "#app",
template: '<App></App>',
components: {
App
},
})
</script>
</body>
</html>Six mixed
Mixing can improve code reusability
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let mixins = {
methods: {
show: function (name) {
console.log(`${name} is here`);
},
hide: function (name) {
console.log(`${name} is here`);
}
}
};
let myAlex = {
template: `
<div>
<button @click="show('alex')">点我显示alex</button>
<button @click="hide('alex')">点我隐藏alex</button>
</div>
`,
mixins: [mixins]
};
let myPeiQi = {
template: `
<div>
<button @click="show('peiqi')">点我显示peiqi</button>
<button @click="hide('peiqi')">点我隐藏peiqi</button>
</div>
`,
mixins: [mixins],
};
let App = {
template: `
<div>
<my-alex></my-alex>
<my-peiqi></my-peiqi>
</div>
`,
components: {
'my-alex': myAlex,
'my-peiqi': myPeiQi,
},
};
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App
}
})
</script>
</body>
</html>Seven slots
Sometimes we need to pass some data to a component, you can use this time slot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav-link {
width: 100px;
height: 100px;
background-color: #2aabd2;
float: left;
margin-left: 5px;
text-align: center;
line-height: 100px;
}
</style>
<script src="../statics/vue.js"></script>
</head>
<body>
<div id="app01">
<com-content>登录</com-content>
<com-content>注册</com-content>
<com-content>最热</com-content>
<com-content>段子</com-content>
<com-content>42区</com-content>
<com-content>图片</com-content>
</div>
<script>
Vue.component('com-content', {
template: `
<div class="nav-link">
<slot></slot>
</div>
`
});
new Vue({
el: "#app01",
})
</script>
</body>
</html>Eight, named slots
Operation using reusable components, and if we write a different page in the same component of it? At this point, we need more slots, and named for different content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav-link {
width: 100px;
height: 100px;
background-color: #2aabd2;
float: left;
margin-left: 5px;
text-align: center;
line-height: 100px;
}
</style>
<script src="../statics/vue.js"></script>
</head>
<body>
<div id="app01">
<base-layout>
<template slot="header">
<h1>这是标题栏</h1>
</template>
<template>
<h2>这是内容</h2>
</template>
<template slot="footer">
<h3>这是页脚</h3>
</template>
</base-layout>
</div>
<script>
let baseLayout = {
template: `
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main><slot></slot></main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
};
new Vue({
el: "#app01",
components: {
"base-layout": baseLayout
}
})
</script>
</body>
</html>We can keep an unnamed slot, this slot is the default slot , which means it will not match as all the contents of the unified export slot.
Nine, v-model used in the assembly
Custom events can also be used to create a support v-modelcustom input components. remember:
`<input v-model="searchText">`Equivalent to:
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>When used in the assembly, v-modelit will be so:
<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>To make it work, within this component <input>must:
将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出After the code is written like this:
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})Now v-modelyou should be able to work perfectly up on this component:
<custom-input v-model="searchText"></custom-input>The following are examples using the v-model components:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let Model = {
template: `
<div>
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
/>
<h1>{{ value }}</h1>
`,
props: ['value']
};
let App = {
template: `
<div>
<custom-input v-model="searchText"></custom-input>
`,
components: {
'custom-input': Model,
},
data(){
return {
searchText: "",
}
}
};
new Vue({
el: "#app",
template: `<App></App>`,
components: {
App,
}
})
</script>
</body>
</html>X. Notes on using components
1, Note a: single root element
When building a component content page, our component may contain more HTML tags.
<h1>Hello World</h1>
<h2>Hello Vue</h2>However, if you try to write in the template, Vue will display an error, and explained that every component must have a single root element ( each component must have only one root element) . You can wrap the contents of the template within a parent element, to fix this problem, for example:
<div>
<h1>Hello World</h1>
<h2>Hello Vue</h2>
</div>2 Notes II: Special HTML parsing element
Some HTML elements, such as <ul>, <ol>, <table>and <select>for which elements can appear inside is strictly limited. And some elements, such as <li>, <tr>and <option>can only occur within certain other specific elements.
This can cause some problems when we use these elements have constraints. E.g:
<table>
<blog-post-row></blog-post-row>
</table>The custom component <blog-post-row>will be promoted as an invalid content to the outside, and the results led to the final rendering error. Fortunately, this particular ischaracteristic gives us an alternative way:
<table>
<tr is="blog-post-row"></tr>
</table>Note that if we use a template from the following sources, then this restriction does not exist:
字符串 (例如：template: '...')
单文件组件 (.vue)
<script type="text/x-template">