table of Contents
Component (Vue core)
Is html, css, js and aggregates, named for the collection, taking an aggregate of html, css and js composed with the name, reusability
Components Category:
1 with the components: new Vue () component generated
2. Local components: {}, using the internal syntax vue
3. global components: Vue.component ( 'component name ", {}), {} syntax for internal use is Vue
Defines a root component
A root page can consist of multiple components, will occur once new one, there is no relationship between the root and the root component assembly
new Vue({
el:'#d1',
data:{},
template:'<p>我可以更改自己内部的内容</p>'
});Define a global component
<div id="d2">
<co-img></co-img>
</div>
Vue.component('co-img',{
template:'<div class="c1"><h2>我想显示出来</h2><img src="img/111.jpg" alt=""></div>'
});
new Vue({
el:'#d2'
})Define a local component
<div id="d3">
<local></local>
</div>
let local = {
template:'<div class="c1"><img src="img/222.jpeg" alt=""></div>'
};
new Vue({
el:'#d3',
components:{
local
}
});The difference between local and global components components:
1. Global components do not need to register at the beginning have all been loaded, and local assemblies need to register, once loaded once
Components features:
1. The components have management html page template examples of the results of assembly members
2. The components are as a root the topmost parent element, local and global components as sub-components, other components may also be referred to as a local and global parent assembly
3. The sub-component data required isolation (data components of each component has its own separate namespace data)
4. After the local assembly must be registered in order to use the global assembly does not require registration, promoting the use of local components
All variables (templates, logic) 5. The assembly arise, the assembly provides management of their own
6. local and global components are with a vue example, one instance of the corresponding set of html, css, js architecture, so that the component instance
Summary: root component, may not be clear template, template defaults mount point page structure, template, if provided, inside the mount point content is invalid, because it will be replaced with the information in the template
Explain: html, body tags can not be replaced, it can not serve as a mount point
Components change to uppercase html used - to replace, html that does not recognize capitalized, capitalized on the experience changed - lowercase
localTag ==> local-tagComponentization
Generated by each component has its own independent name spaces, without interfering with each other,
1. Define a function data, so that the function has a return value
2. The operation of the return value
// 定义一个局部组
let local = {
template:'<div class="c1" @click="fn"><img src="img/222.jpeg" alt=""><h4>我被点击了{{count}}次</h4></div>',
data(){ // 局部或全局组件，一个组件可能会被复用多次，每个组件都应该有自己的独立的变量名称空间
return{
count:0
}
}, // 数据需要组件化，作为方法的返回值（方法执行之后会产生一个局部作用域）
methods:{
fn(){
console.log(11111);
this.count ++
}
}
};--- component parameter passing from father to son
1. The sub-assembly component by props custom attributes (using reflection, to fill the string, but can be used directly as the time variable)
2. The sub-assembly will be rendered in the parent assembly, when you render binding the variable name to the parent component of the custom properties in a subcomponent of the book, variable values can be passed to the sub-assemblies
to sum up:
1. First an array is defined in the script, the required value of the loop are placed in an array,
2. Use for Tags in the corresponding loop, k will be returned through custom attributes,
3. Define the attribute data
4. Use props value k received and processed according to the reflection manner corresponding to the value of k will be withdrawn
5. When the value of the component, the value can be directly, you do not need to use this
6. custom properties may receive variables
<div id="d3">
<local v-for="img in image" :img="img"></local>
</div>
let image = [
{
name:'我是222',
img:'img/222.jpeg'
} ,
{
name:'我是111',
img:'img/111.jpg'
}
];
let local = {
props:['img'],
template:'<div class="c1" @click="fn"><img :src="img.img" alt=""><h4>我{{img.name}}被点击了{{count}}次</h4></div>',
data(){
return{
count:0
}
},
methods:{
fn(){
this.count ++
}
}
};
new Vue({
el:'#d3',
data:{
image
},
components:{
local
},
});Component parameter passing --- parent child transmission
Since the event definition component label:
Custom events are part of sub-assemblies, subassemblies and bind event rendering method in the parent assembly, the event method implemented by parent component
How subassembly trigger custom events:. This $ emit ( 'custom event name', the event trigger parameters are callback)
Subassemblies trigger custom events, content to carry out sub-assemblies, custom event method implementations within parent components, sub-assemblies to get the message delivered to the parent component
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>子传父</title>
</head>
<body>
<div id="app">
<h1>{{ h1 }}</h1>
<h3>{{ h3 }}</h3>
<tag @action="actionFn"></tag>
<hr>
<tag2 @h1a="aFn1" @h3a="aFn3"></tag2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let tag = {
template: `
<div>
<input type="text" v-model="t1">
<input type="text" v-model="t2">
<button @click="changeTitle">修改标题</button>
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
changeTitle() {
if (this.t1 && this.t2) {
// console.log(this.t1, this.t2);
this.$emit('action', this.t1, this.t2);
this.t1 = '';
this.t2 = '';
}
}
}
};
let tag2 = {
template: `
<div>
主标题内容：<input type="text" v-model="t1" @input="t1Fn">
子标题内容：<input type="text" v-model="t2">
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
t1Fn() {
this.$emit('h1a', this.t1);
}
},
watch: {
t2 () {
this.$emit('h3a', this.t2);
}
}
};
new Vue({
el: '#app',
data: {
h1: '主标题',
h3: '子标题'
},
components: {
tag,
tag2,
},
methods: {
actionFn(a, b, c) {
// console.log('触发了', a, b, c);
this.h1 = a;
this.h3 = b;
},
aFn1(a) {
if (!a) {
this.h1 = '主标题';
return;
}
this.h1 = a;
},
aFn3(a) {
if (!a) {
this.h3 = '子标题';
return;
}
this.h3 = a;
},
}
})
</script>
</html>