组件化开发

 

全局组件（Vue.component）

组件可以在多个 Vue 实例 中使用

<script>
    // 1.创建组件构造器对象
    const cop = Vue.extend({
        template: `
        <div>
            <h2>
                我是标题
            </h2>
            <p>
                我是内容
            </p>
            <p>
                我是内容
            </p>
        </div>
        `
    });

    // 2.注册组件
    Vue.component('my-cop', cop);
</script>

局部组件

<script>
    // 1.创建组件构造器对象
    const cop = Vue.extend({
        template: `
        <div>
            <h2>
                我是标题
            </h2>
            <p>
                我是内容
            </p>
            <p>
                我是内容
            </p>
        </div>
        `
    });

    // 2.注册局部组件
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            my-cop: cop
        }    
    });
  
</script>

父子组件

<script>
    // 1.创建组件构造器对象
    const cop = Vue.extend({
        template: `
        <div>
            <h2>
                我是标题
            </h2>
            <p>
                我是内容
            </p>
            <p>
                我是内容
            </p>
        </div>
        `
    });

    // 1.创建组件构造器对象
    const cop2 = Vue.extend({
        template: `
        <div>
            <h2>
                我是标题2
            </h2>
            <p>
                我是内容2
            </p>
            <p>
                我是内容2
            </p>
        </div>
        `，
        // 在父组件中注册子组件即可
        components: {
            cop3: cop
        }   
    });

    // 2.注册局部组件
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        // 在根组件中再注册父组件
        components: {
            my-cop: cop2
        }    
    });
  
</script>

语法糖注册组件

<script>
    // 2.注册全局组件
    Vue.component('my-cop', {
        template: `
        <div>
            <h2>
                我是标题
            </h2>
            <p>
                我是内容
            </p>
            <p>
                我是内容
            </p>
        </div>
        `
    });

    // 3.注册局部组件
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            'my-cop': {
                template: 
                `<div>
                    <h2>
                        我是标题
                    </h2>
                    <p>
                        我是内容
                    </p>
                    <p>
                        我是内容
                    </p>
                </div>`
            }
        }    
    });
  
</script>

分离写法

<script>
    // 2.注册全局组件
    Vue.component('my-cop', {
        template: '#tmp'
    });

    // 3.注册局部组件
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: '#tmp'
    });
  
</script>

<template id="tmp">
    <div>
       <h2>
         我是标题
       </h2>
        <p>
         我是内容
       </p>
       <p>
          我是内容
       </p>
        </div>
</template>

组件中使用数据

<script>
    // 2.注册全局组件
    Vue.component('my-cop', {
        template: '#tmp',
        data(){
            return {
                title: 'abc'
            }
        }
    });

    // 3.注册局部组件
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: '#tmp'
    });
  
</script>

父子组件通信

props 等同于 angular 中的 @Input 装饰器，用于接收父组件传递进来的数据，

可以定义参数名，以及参数类型

<script>
    // 2.注册全局组件
    Vue.component('my-cop', {
        template: '#tmp',
        props: {
            cArr: Array,
            cMsg: String,
            cMessage: {
                type: String,
                default: 'test',
                required: true
            }
        }
        data(){
            return {
                title: 'abc'
            }
        }
    });
</script>

子组件通过 .$emit('事件名'， 值) 进行发射，父组件通过 @事件名接收，同 angular emit

父子组件数据传递

父组件通过 $ref 来获取子组件中的数据，子组件对象实例中定义 ref=‘xxx’ 即可，

一般不通过 $children 获取，$children 是获取子组件所有数据