vue 组件学习

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20087231/article/details/83375566

1.通过选项-创建全局组件

流程：创建组件构造器->注册组件->使用

    <div id="app">
        <my-date></my-date>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 1.创建组件构造器
        let Profile = Vue.extend({
            // 模板选项
            template: `
                <div>
                    <input type="date">
                    <p>今天已经是冬天了！</p>        
                </div>
            `
        });
        // 2.注册全局组件
        Vue.component('my-date', Profile);
        new Vue({
            el: '#app',
        });
    </script>

2.通过选项-创建局部组件

在vue实例化对象里面通过components键值对注册

    <div id="app">
        <my-date></my-date>
        <my-color></my-color>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 1.创建组件构造器
        let Profile = Vue.extend({
            // 模板选项
            template: `
                <div>
                    <input type="date">
                    <p>今天已经是冬天了！</p>        
                </div>
            `
        });
        let Profile2 = Vue.extend({
            template: `
                <div>
                    <input type="color">
                    <p>我是一个色板！</p>
                </div>
            `
        });
        new Vue({
            el: '#app',
            components: {
                'my-date': Profile,
                'my-color': Profile2
            }
        });
    </script>

3.通过选项-创建父子组件

    <div id="app">
        <parent></parent>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 1.子组件构造器
        let Child1 = Vue.extend({
            template: `<p>子组件1</p>>`
        });
        let Child2 = Vue.extend({
            template: `<p>子组件2</p>>`
        });
        // 2.父组件构造器
        Vue.component('parent', {
            components: {
                'my-child1': Child1,
                'my-child2': Child2
            },
            template: `
                <div>
                    <my-child1></my-child1> 
                    <my-child2></my-child2>    
                </div>
            `
        })
        new Vue({
            el: '#app',
        });
    </script>

4.通过template创建组件

    <div id="app">
        <my-div></my-div>
    </div>
    <template id="my_div">
        <div>
            <div>我是MT！</div>
            <input type="date">
        </div>
    </template>
    <script src="js/vue.js"></script>
    <script>
        // 1.实例化组件
        Vue.component('my-div', {
            template: '#my_div'
        });
        new Vue({
            el: '#app',
        });
    </script>

5.通过script创建组件

    <div id="app">
        <my-div></my-div>
    </div>
    <script type="text/template" id="my_div">
        <div>
            <div>我是MT！</div>
            <input type="date">
        </div>
    </script>
    <script src="js/vue.js"></script>
    <script>
        // 1.实例化组件
        Vue.component('my-div', {
            template: '#my_div'
        });
        new Vue({
            el: '#app',
        });
    </script>

6.组件之间的通信

父组件传递数据给子组件

    <div id="app">
        <my-div message="今天要下雨" imgsrc="img/img_01.jpg"></my-div>
        <my-div message="明天要下雪" imgsrc="img/img_02.jpg"></my-div>
    </div>
    <template id="my_div">
        <div>
            <h1>{{message}}</h1>
            <img :src="imgsrc" width="100"> <!--不支持驼峰式写法imgSrc-->
        </div>
    </template>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('my-div', {
            template: '#my_div',
            props: ['message', 'imgsrc']
        })
        new Vue({
            el: '#app',
        });
    </script>

7.多层组件之间的通信

注意：多层组件之间的属性传递必须通过动态绑定

    <div id="app">
        <my-parent :imgtitle="title" :imgsrc="img"></my-parent>
    </div>
    <template id="my_img">
        <img :src="imgsrc" width="200">
    </template>
    <template id="my_title">
        <h1>{{title}}</h1>
    </template>
    <template id="my_parent">
        <div>
            <child1 :imgsrc="imgsrc"></child1>
            <child2 :title = "imgtitle"></child2>
        </div>
    </template>
    <script src="js/vue.js"></script>
    <script>
        // 1.子组件的实例
        let Child1 = Vue.extend({
            template: '#my_img',
            props: ['imgsrc']
        });
        let Child2 = Vue.extend({
            template: '#my_title',
            props: ['title']
        });
        // 2.注册父组件
        Vue.component('my-parent', {
            props: ['imgtitle', 'imgsrc'],
            components: {
                'child1': Child1,
                'child2': Child2
            },
            template: '#my_parent'
        })
        new Vue({
            el: '#app',
            data: {
                title: '我是不是很漂亮',
                img: 'img/img_01.jpg'
            }
        });
    </script>

8.子组件传数据给父组件，通过自定义事件来传递

    <div id="app">
        <my-btn @total="allCounter"></my-btn>
        <my-btn @total="allCounter"></my-btn>
        <my-btn @total="allCounter"></my-btn>
        <my-btn @total="allCounter"></my-btn>
        <p>所有按钮一共点击了{{totalCounter}}次</p>
    </div>
    <template id="my_btn">
        <button @click="total">点击了{{counter}}次</button>
    </template>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('my-btn', {
            template: '#my_btn',
            data() {
                return {
                    counter: 0
                }
            },
            methods: {
                total() {
                    this.counter += 1;
                    // 通知外界，调用了这个方法
                    this.$emit('total');
                }
            }
        });
        new Vue({
            el: '#app',
            data: {
                totalCounter: 0
            },
            methods: {
                allCounter() {
                    this.totalCounter += 1;
                }
            }
        });
    </script>