---- VUE monovalent group parent assembly facilitator pass from father to son

Js supplement for loop:

// for in遍历的是取值关键 | for of遍历的是值

Package

Concept: html, css, jsa collection of names, with the name of the multiplex html, css, jscombined into an aggregate reflects复用性

1. component category:

// 根组件:new Vue() 生产的组件

// 局部组件: 组件名 = {} , {}内部采用的是vue语法

// 全局组件: Vue.component('组件名', {}) , {}内部采用的是vue语法

2. The characteristics of the components

1. component has management components htmlresults page of templatean instance member, templatethere is one and only one root tag

Mount point is essentially placeholder replacement template module monovalent group

// 总结: 根组件,可以不明确template, template默认采用挂载点页面结构:如果设置的template, 挂载点内部的内容无效,因为会被替换
// 解释: html, body 标签不能被替换,所以不能为挂载点.
// template 渲染真实dom 替换虚拟dom

2. The components are as a root the topmost parent element, as a divalent group of local and global price subgroups, may be other local and global parent component

3. The sub-component data required isolation (data components of each component has its own separate namespace data)

4. After the local assembly must register to use, does not require registration globally, promoting the use of local components

All variables (templates, logic) component 5. appearing monovalent provided by the set of its own management

6. The assembly is a local global root vueexample, corresponding to a real set html, css, jsstructure, component instance is

3. Create local assemblies

// 声明局部组件:局部组件要在其父在组件中注册才能使用
// 1.声明组件 2.注册组件 3.渲染组件

statement:

let localTag = {
    template:'<a>pass</a>',
    methods:{
        pass
    }
}

// 注册在components:{}里注册 key 和 value 如果一样可以简写 key

Vue({
    el:'xx',
    components:{
        localTag
    }
})

But htmlin tagdoes not support it with capital - instead

<local-tag></local-tag>

4. Global Component

// 声明局部组件:局部组件要在其父在组件中注册才能使用
// 1.声明组件 2.渲染组件 

Vue.component('组件名', { 
    template:'<a>pass</a>',
    methods:{
        pass
    }
} )

<组件名></组件名>

II. Componentization

Data for each component should be isolated from everyone but the data in the data access are the same so let him have his own local scope

let localTag = {
    data:funttion(){
    return {
    num:0
}
    data(){
        return {
            num:0
        }  // 数据需要组件化，作为方法的返回值（方法执行后会产生一个局部作用域）
    }
}
    template:'<a>{{num}}</a>',
    methods:{
        pass
    }
}

// 局部或全局取件,一个组件可能会被重复使用多次, 每个组件都应该有自己独立的名称空间

// 数据需要组件化,作为方法的返回值(return{} 里面放入数据就行)

I. Components parameter passing from father to son

// 1）子组件可以通过props自定义组件属性（采用反射机制，需要填写字符串，但是使用时可以直接作为变量）
// 2）子组件会在父组件中渲染，渲染时，将父组件的变量绑定给子组件的自定义属性，将可以将变量值传递给子组件

Keywords:props

Tag specified in the sub-custom labels then fill in the subassembly props:['xx']to obtain the corresponding value

<text-tag :abc="xxx"></Text-tag>

let textTag ={
    props: ['xxx']
};

Meanwhile, the value of which call also requires the use of property is bound to get is variable because coming!

Second components pass parameters: parent child transmission

// 自定义组件标签的事件
// 自定义事件是属于子组件的，子组件在父组件中渲染并绑定事件方法，所以事件方法由父组件来实现
// 子组件如何触发自定义事件：this.$emit('自定义事件名', 触发事件回调的参数们)
// 子组件触发自定义事件，携带出子组件的内容，在父组件中实现自定义事件的方法，拿到子组件传递给父组件的消息 

How subassembly trigger custom events:

<!--this.$emit('自定义事件名', 触发事件回调的参数们)-->

<tag @action="actionFn"></tag>

Parent component methodsmethod

 methods: {
    actionFn(a, b, c) {
    // console.log('触发了', a, b, c);
    this.h1 = a;
    this.h3 = b;
    },
 }

Sub-assembly methodsmethod

 methods: {
            changeTitle() {
                if (this.t1 && this.t2) {
                    this.$emit('action', this.t1, this.t2);
                }
            }
        }