Vue组件相关

 一  组建的注册

　　1.全局注册

 <div id="app">
      <wdb></wdb>
 </div>
 <hr>
 <div id="app1">
     <wdb></wdb>
     <wdb></wdb>
 </div>
 <script>
    Vue.component('wdb',{
        template:`<div><h1>这是wdb的地盘</h1></div>>`,
     });
    const app=new Vue({
      el:'#app',
     });
    const app2=new Vue({
            el:'#app1',
     })
 </script>

　　

　　2.局部注册      实例化的vue对象中注册

<div id="app">
    <my_component></my_component>
</div>
<script>
    var Child={
        template:`<div><h1>{{name}}</h1></div>`,
        data:function () {          ******data必须是函数(方法)
            return {
                name:'wdb',
            }
        }
    };
    const app=new Vue({
        el:'#app',
        components:{
             'my_component':Child,
        }
    })
</script>

　　3.子组件的注册

<div id="app">
    <father></father>
</div>
<script>
    let child = {
        template: `<div><h2>这是子组件</h2></div>`,
    };
    let father = {
        template: `<div>
                    <h1>这是父组件</h1>
                    <child></child>
                    </div>`,
        components: {
            child: child
        }
    };

    const app = new Vue({
        el: "#app",
        components: {
            father: father
        }
    })
</script>

二 组件之间的通信

　　1.父子通信

<div id="app">
    <father></father>
</div>
<script>
    let child={
        template:`<div>
                        <h2>这是子组件</h2>
                        <p>父亲给了我{{money}}美元</p>
                    </div>`,
        props:['money']
    };
    let father={
        template:`<div>
                    <h1>这是父组件</h1>
                    <child :money="num"></child>
                </div>
                `,
        data:function () {
            return {
                num:100,
                }
            },
            components:{
                child:child,
            }
        };
    const app=new Vue({
        el:'#app',
        components: {father:father,}
        })
</script>

　   

　　2.子父通信

<div id="app">
    <father></father>
</div>
<script>
    let child={
        template:`<div>
                    <h2>这是子组件</h2>
                    <button @click="my_click">点我发送信息</button>
                </div>`,
        methods:{
            my_click:function () {
                this.$emit('son_say','爸,你要当爷爷了');
            }
        }
    };
    let father={
         template: `<div>
                <h1>这是父组件</h1>
                <!--// 接收这个事件-->
                <child @son_say="my_son_say"></child>
                <p>老婆~~你儿子说~~{{msg}}</p>
                </div>`,
         components: {
            child: child
        },
26         data(){
27              return{
28                  msg:''
29              }
30         },
        methods: {
             my_son_say:function (data) {
                 this.msg=data;
             }
        }
    };
    const app=new Vue({
        el:'#app',
        components:{
            father:father,
        }
    })
</script>

　   3.非父子通信

<div id="app">
    <wdb class="wdb"></wdb>
    <zhwl class="zh"></zhwl>
</div>
<script>
    let middle_tool=new Vue();
    let wdb={
        template:`<div>
                    <h1>这是王同学</h1>
                    <button @click="w_click">点我给张同学发送信息</button>
                    </div>`,
        methods:{
            w_click:function () {
                middle_tool.$emit('houhou','花大姐记得买票')
            }
        }
    };
    let zhwl={
        template: `<div>
                        <h1>这是张同学</h1>
                        <P>王同学对我说{{say}}</P>
                    </div>`,
        data(){
            return{
                say:'',
            }
        },
        mounted(){
            let that=this;
            middle_tool.$on('houhou',function (data) {
                that.say=data;
            })
        }
    };
    const app=new Vue({
        el:'#app',
        components:{
            zhwl:zhwl,
            wdb:wdb,
        }
    })
</script>

三 混合     重复功能和数据的储存器

<div id="app">
    <com_1></com_1>
    <com_2></com_2>
</div>
<script>
    let base = {
 7         data(){
 8             return{
 9                 is_show: false
10             }
11         },
12         methods: {
13             show: function () {
14                 this.is_show = true
15             },
16             hide: function () {
17                 this.is_show = false
18             }
19         }
20     };
    let com_1 = {
        template: `<div>
                    <h1 v-show="is_show">这是第一个组件</h1>
                    <button @click="show">点我显示</button>
                    <button @click="hide">点我隐藏</button>
                    </div>`,
        data(){
            return{
                is_show: true
            }
        },
        mixins: [base]
    };
    let com_2 = {
        template: `<div>
                        <h1 v-show="is_show">这是第二个组件</h1>
                        <button @mouseenter="show" @mouseleave="hide">鼠标移入显示移出隐藏</button>
                    </div>`,
      minxins: [base]
    };

    const app = new Vue({
        el: "#app",
        components: {
            com_1: com_1,
            com_2: com_2
        }
    })
</script>

四 插槽　 插槽是一套内容分发的API，在组件中，<slot>作为内容承载分发的出口

<div id="app">
    <com>
        <div slot="title">python</div>
        <div slot="article">很贵 很难学  常人勿扰</div>
    </com>
    <com>
        <div slot="title">linux</div>
        <div slot="article">每天对着黑屏发呆吧</div>
    </com>
</div>
<script>
    let com = {
        template: `<div>
                    <h1>路飞学城</h1>
                    <slot name="title"></slot>
                    <slot name="article"></slot>
                    </div>`,
    };
    const app = new Vue({
        el: "#app",
        components: {
            com: com
        }
    })
</script>