(Day67) three components, component, component parameter passing

First, acquaintance components

(A) concept

1. Component is the html, css and js a collection, you can reuse again by the aggregate component
2. Assembly into the root component, the local component, global components

(B) Features

1. Each component is an example Vue
2. As the top-most parent root component assembly, local and global components as sub-components, the components may be the parent of other local and global components
3. Each component has its own template template template, root component is the mount point, template has one and only one root tag
4. All variables appear component, the component itself has provided
5. After partial assembly must be registered in order to use the global assembly does not require registration, we recommend the use of local components
6. Data subcomponents require isolation (by function so that each component has its own independent scope, component-based data)

Second, the classification of components

(A) a root assembly

1. Root component: new Vue()component generated
2. Root component can not clear template, template defaults mount point Page Structure
3. If you set the template, the contents of the mount point inside will be replaced
4. Thus, html body, and not as a label mount point

<div id="app">
    {{ msg }}
</div>
<script>
    new Vue({
    el: '#app',  // 被组件 template 模块进行替换的占位符
    data: {
        msg: '组件信息'
    },
    template: '<p>{{ msg }}</p>'
})
</script>

(B) sub-assembly

1. Local component: let 组件名={}{} syntax for internal use is Vue
2. To register to use local components in the parent assembly

<div id="app">
    <div class="wrap">
        <!--3. 渲染组件-->
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
        // 1. 声明组件
    let localTag = {
        template: `
    <div class="box" @click="fn">
        <img src="img/001.jpg" alt="">
        <h2>美女</h2>
    </div>`,
        methods: {
            fn() {
                console.log(this)
            }
        }
    };
    
    // 2. 注册组件
    new Vue({
        el: '#app',
        data: {},
        components: {  // 注册组件
            localTag,
        }
    })
</script>

(C) global components

1. Global components: Vue.component('组件名'，{}){} syntax for internal use is Vue
2. Global components do not require registration

<div id="app">
    <div class="wrap">
        <global-tag></global-tag>
        <global-tag></global-tag>
        <global-tag></global-tag>
        <global-tag></global-tag>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    // 全局组件
    Vue.component('global-tag', {
        template: `
            <div class="box" @click="fn">
            <img src="img/002.jpg" alt="">
            <h2>大长腿</h2>
                </div>`,
        methods: {
            fn() {
                console.log(this)
            }
        }
    });
    
    // Vue实例
    new Vue({
        el: '#app',
        data: {},
    })
</script>

Second, the data component of

1. Local or global pickup, a component may be reused many times, each component should have its own independent variable namespace
2. As the return value (a local scope is generated after performing the method), in order to achieve data components of

<div id="app">
    <div class="wrap">
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
</div>
<script>
    let localTag = {
        template: `
        <div class="box" @click="fn">
            <img src="img/001.jpg" alt="">
            <h2>捶了美女{{ count }}下</h2>
        </div>
        `,
        data() { //局部或全局取件，一个组件可能会被复用多次，每个组件都应该有自己独立的变量名称空间
            return {
                count: 0,
            }
        }, // 数据需要组件化，作为方法的返回值（方法执行后会产生一个局部作用域）
        methods: {
            fn() {
                console.log(this);
                this.count++;
            }
        }
    };

    new Vue({
        el: '#app',
        data: {},
        components: {
            localTag,
        }
    });
</script>

Third, the parameter passing assembly

(A) from father to son

1. Subassembly by props custom component attributes (using reflection, to fill the string, but may be directly used as variable)
2. Renders subassembly within parent components, when rendered, the parent element to bind variables custom properties subassembly, whereby the variable value passed to the subassembly

<div id="app">
    <localTag :sup_data1='sup_data1' :supData2='sup_data2'></localTag>
</div>
<script type="text/javascript">
    
     let localTag = {
        props: ['dog', 'def', 'xyz'],
        props:['sup_data1', 'supdata2'],
        template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>'
    };
    
    new Vue({
        el: '#app',
        data: {
            sup_data1: '数据1',
            sup_data2: '数据2'
        },
        components: {
            localTag,
        }
    })
</script>

(B) the parent child transmission

1. Data transfer by sending a request event
2. Custom events are part of sub-assemblies, subassemblies and bind event rendering method in the parent assembly, the event method implemented by the parent component
3. By subassembly this.@emit('自定义事件名'，触发事件回调的参数)trigger event custom event method, the callback parameter to the parent component
4. Parameters parent component trigger events way to get passed

<div id="app">
    <global-tag @send_action='receiveAction'></global-tag>
</div>
<script type="text/javascript">
    let localTag={
         data () {
            return {
                sub_data1: "数据1",
                sub_data2: '数据2'
            }
        },
        template: '<div @click="clickAction">发生</div>',
         methods: {
            clickAction () {
                this.$emit('send_action', this.sub_data1, this.sub_data2)
            }
        }
    }
   
    new Vue({
        el: '#app',
        methods: {
            receiveAction (v1, v2) {
                console.log(v1, v2)
            }
        }
    })
</script>