组件

1.全局组件：

不在new Vue里注册组件
步骤：

1.1.创建组件构造器,即写html模版
let Profile = Vue.extend({
       //1.1.1模版选项
        template:`
            <div>
                <input type="date">
                <p>今天已经是冬天了!</p>
            </div>
        `
    });
1.2.注册一个全局的组件

即给组件赋予命名 <my-date></my-date>

Vue.component('my-date',Profile);

2.局部组件

在new Vue中注册组件
在id="app1"的div中不能够用Profile组件

//1.创建组件构造器
    let Profile = Vue.extend({
        //1.1模版选项
        template:`
            <div>
                <input type="date">
                <p>今天已经是冬天了!</p>
            </div>
        `
    });

new Vue({
        el:'#app',
        components:{
            //2.注册局部组件
            'my-date':Profile
        }
    })

3.父子组件：

3.1.创建子组件构造器
let Child1 = Vue.extend({
        template:`<img src="../img/slide.jpg" width="200">`
    });

    let Child2 = Vue.extend({
        template:`<p>我认为自己很美！</p>`
    });
3.2注册子组件
Vue.component('child',Child1);
3.3.创建父组件构造器
Vue.component('parent',{
        components:{
            //2.注册局部组件
            'my-child1':Child1,
            'my-child2':Child2
        },
        template:`
            <div>
                <my-child1></my-child1>
                <my-child2></my-child2>
            </div>
        `
    });
视图区：
<div id="app">
    <parent>
        <!--<my-child1></my-child1> 不显示 不执行-->
    </parent>
    <!--<my-child1></my-child1> 不执行 ，必须通过父组件-->

    <child></child>
</div>

4.template标签<template></template>

template标签里的最外层div一定要加上

<body>
<div id="app">
    <my-div></my-div>
</div>

<template id="my_div">
    <div>
        <div>我是MT!</div><!--必须包在div里-->
        <input type="date"><!--必须包在div里-->
        <img src="../img/slide.jpg" width="400"><!--必须包在div里-->
    </div>
</template>

<script src="../js/vue.min.js"></script>
<script>
    //1.实例化组件
    Vue.component('my-div',{
        template:'#my_div'
    });
    new Vue({
        el:'#app',
    })
</script>
</body>

5.script标签

与template标签类似，不过需要在script标签属性中加type="text/template">

<body>
<div id="app">
    <my-div></my-div>
</div>

<script type="text/template" id="my_div">
    <div>
        <img src="../img/slide.jpg" width="200"><!--必须包在div里-->
        <p>我是花姑娘</p>
    </div>
</script>

<script src="../js/vue.min.js"></script>
<script>
    //1.实例化组件
    Vue.component('my-div',{
        template:'#my_div'
    });
    new Vue({
        el:'#app',

    })
</script>
</body>

6.挂载选项

即在视图中使用组件的data
在组建中data必须是函数

<body>
<div id="app">
    <my-div></my-div>
</div>

<script type="text/template" id="my_div">
    <div>
        <img src="../img/slide.jpg" width="200"><!--必须包在div里-->
        <p>我是花姑娘</p>
        <p>{{message}}</p>
    </div>
</script>

<script src="../js/vue.min.js"></script>
<script>
//    在component中用data必须是函数
    //1.实例化组件
    Vue.component('my-div',{
        template:'#my_div',
       /* data:{
            message:'我是MT'
        }
  这是错误写法
*/
        data(){
            return {
                message:'我是MT'
            }
        }
    });
    new Vue({
        el:'#app',

    })
</script>
</body>

★7.组件之间的通信：

利用props

<body>
    <div id="app">
        <my-div message="今天要下雨" imgsrc="../img/slide.jpg"></my-div>
        <my-div message="明天要下冰雹" imgsrc="../img/slide.jpg"></my-div>
        <my-div></my-div>
    </div>

    <template id="my_div">
        <div>
            <h1>{{message}}</h1>
            <img :src="imgsrc" width="200" alt="">
        </div>
    </template>

    <script src="../js/vue.min.js"></script>
    <script>
        //1.创建组件
        Vue.component('my-div',{
            template:'#my_div',
            props:['message','imgsrc']
        });
        new Vue({
            el:'#app',
            data:{
                msg:'今天的天气很好'
            }
        })
    </script>
</body>

★8.多层组件之间的通信

<body>
<!--多层传递必须动态绑定-->
<!--此案例有三层关系 ，一个大的包含两个小的-->
    <div id="app">
        <my-parent :imgtitle="title" :imgsrc="img"></my-parent>
    </div>

    <template id="my_img">
        <img :src="imgsrc" width="200" alt="">
    </template>

    <template id="my_title">
        <h2>{{title}}</h2>
    </template>

    <template id="my_parent">
        <div>
            <child1 :imgsrc="imgsrc"></child1>
            <child2 :title="imgtitle"></child2>
        </div>
    </template>

    <script src="../js/vue.min.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/slide.jpg'
            }
        })
    </script>
</body>

props里的是props:['imgsrc']
则在视图中:imgsrc="img"对应于template里的变量?

9.自定义事件：

<body>
    <div id="app">
        <my-btn @tt="allcounter()"></my-btn>
        <my-btn @tt="allcounter()"></my-btn>
        <my-btn @tt="allcounter()"></my-btn>
        <my-btn @tt="allcounter()"></my-btn>
        <my-btn @tt="allcounter()"></my-btn>
        <p>所有按钮一共点击了{{totalCounter}}次</p>
    </div>

    <template id="my_btn">
        <button @click="total()">点击了{{counter}}次</button>
    </template>

    <script src="../js/vue.min.js"></script>
    <script>
        Vue.component('my-btn',{
            template:'#my_btn',
            data(){
                return {
                    counter:0
                }
            },
            methods:{
                total(){
                    this.counter += 1;
                    //通知外界，我调用了这个方法,自定义事件名称
                    this.$emit('tt');
                }
            }
        });
        new Vue({
            el:'#app',
            data:{
                totalCounter:0
            },
            methods:{
                allcounter(){
                    this.totalCounter += 1;
                }
            }
        })
    </script>
</body>

10.匿名插槽：

将<slot>内容替换

<body>
<!--插槽存在组件中-->
    <div id="app">
        <my-slot>
            <!--可以随意放任何东西-->
            <!--<img src="../img/slide.jpg" width="200" alt="">-->
            <!--<p>这个姑娘好美啊！</p>-->
            <input type="date">
        </my-slot>
    </div>

    <template id="my_slot">
        <div id="panel">
            <h2 class="panel-header">插槽的头部</h2>
            <!--预留一个插槽-->
            <slot>可以替换任何标签，默认显示提示的内容</slot>
            <footer>插槽的尾部</footer>
        </div>
    </template>

    <script src="../js/vue.min.js"></script>
    <script>
        Vue.component('my-slot',{
            template:'#my_slot'
        });
        new Vue({
            el:'#app',
            data:{
                msg:'今天的天气很好'
            }
        })
    </script>
</body>

11.实名插槽

<body>
    <div id="app">
        <my-computer>
            <div slot="cpu">Inter Core i8</div>
            <img slot="gpu" src="../img/slide.jpg" width="200" alt="">
            <div slot="memory">128G</div>
            <input type="color" slot="hard-drive">
        </my-computer>
    </div>

    <template id="my_computer">
        <div id="main">
            <slot name="cpu">这里是插cpu的</slot>
            <slot name="gpu">这里是插gpu的</slot>
            <slot name="memory">这里是插内存条的</slot>
            <slot name="hard-drive">这里是插硬盘的</slot>
        </div>
    </template>

    <script src="../js/vue.min.js"></script>
    <script>
        Vue.component('my-computer',{
           template:'#my_computer'
        });

        new Vue({
            el:'#app',
            data:{
                msg:'今天的天气很好'
            }
        })
    </script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容