7. Vue - Components - Code World

First, component classification

1. Definitions

Components can be extended HTML elements, reusable code package. At a high level, the component is the custom elements. Features are: code reuse, improve development efficiency, so that the page structure more clearly.

2. The sub-assembly

It can only be used in the definition of el can not be used elsewhere, otherwise it will not take effect.

3. Global Components

It can be used anywhere on the page.

Second, the use of components

1. The sub-assembly

2. Global Components

3. The father and son by value

In assembly, the parameter needs to be transmitted declaration props
Within parent components, the v-bind: variable name = 'variable' pass data

4. The child-parent values pass

Throws time time is not recommended to modify the data directly in the assembly in the root instances

Subassemblies by $ emit ( 'custom event name') throws out a custom event
Parent components by v-on: a custom event listener function name = Action subassemblies throw event

Note: Event "addnum" in the component The issue, but the handler is registered as "addNum". Please note, HTML attribute is not case-sensitive, and can not be used when using the v-on in-DOM template to listen camelCase event. You should use the "add-num" rather than "addNum".

5. The assembly by value

Click button assembly B to achieve, so that the value of the self-energizing component A; sub-assembly 1 -> sub-assembly 2

(1) assembly in a custom event thrown by a common bus to bus Vue. $ Emit ( 'custom event', data)
In Method 2 subassembly mounted to the binding event bus bus. $ On ( 'custom event', (val) => {...})

(1) Code territory

<div id="app">
    <my-alex></my-alex>
    <hr>
    <my-mjj></my-mjj>
</div>

(2) component code

<script>
    // 借助一个空的Vue对象实现组件间通信
    let bus = new Vue();   // 大项目用这个VueX
    let A = {
        template: `
            <div>
                <h1>这是 子组件： my-alex </h1>
                <p>my-mjj被选中的次数：{{ num }}</p>
            </div>
        `,
        data() {
            return {
                num: 0
            }
        },
        mounted(){
            // 在文档准备就绪之后就要开始监听bus是否触发了 xuanwo 的事件
            /*
            bus.$on('xuanwo', function (val) {
                // this.num += 1;  // ?
                console.log(val);
                console.log(this);  // this 并不是组件A
            })
            */
            // on第一个参数是自定义事件名;第二个参数是回调函数
            bus.$on('xuanwo', (val)=> {
                // this.num += 1;  // ?
                console.log(val);
                console.log(this);  // this 是组件A
                this.num = val;
            })
        }
    };

    let B = {
        template: `
            <div>
                <h1>这是 子组件： my-mjj </h1>
                <button v-on:click="add">选我</button>
            </div>
        `,
        data(){
            return {
                num: 0
            }
        },
        methods: {
            add(){
                this.num += 1;
                // 利用bus对象抛出一个自定义事件
                bus.$emit('xuanwo', this.num);
            }
        }
    };

    let app = new Vue({
        el: '#app',
        data: {
            totalNum: 0
        },
        components: {
            'my-alex': A,
            'my-mjj': B
        }
    })
</script>

7. Vue - Components