2018年11月10日关于Vue的混合mixins and 插槽slots

1、混合mixins

//在html中的相关代码
<div id="app">

    <popup></popup>
    <tooltip></tooltip>
</div>

//在Vue.js的相关代码
Vue.component('tooltip',{
   template:`
    <div>
        <span @mouseenter="visible = true" @mouseleave="visible = false">NQY</span>    
        <div v-if="visible">
            <h4>你好啊</h4>
            how are you ? i am fine ,thank you , and you?
        </div>
    </div>
   `,
    data:function () {
        return{
            visible:false,
        }
    }
});

Vue.component('popup',{
    template:`
    <div>
        <button @click="toggle">点击我</button>
        <div v-if="visible">
            <h4>title</h4>
            how are you ? i am fine ,thank you , and you?
        </div>
    </div>`,
    methods:{
      toggle:function () {
          this.visible = !this.visible;
      }  
    },
    data:function () {
        return{
            visible:false,
        }
    }
});


var app= new Vue({
    el:'#app',
})

在我们使用了混合mixins的方法之后，就可以将一些功能方法定义为组件，这样就可以重复调用了。

//在Vue.js的相关代码
var base = {
    methods:{
        toggle:function () {
            this.visible = !this.visible;
        },
        show:function () {
            this.visible = true
        } ,
        hide:function () {
            this.visible = false
        }
    },
    data:function () {
        return{
            visible:false,
        }
    },
    misins:[base],
};

Vue.component('tooltip',{
   template:`
    <div>
        <span @mouseenter="show" @mouseleave="hide">NQY</span>    
        <div v-if="visible">
            <h4>你好啊</h4>
            how are you ? i am fine ,thank you , and you?
        </div>
    </div>
   `,
   mixins:[base],
});

Vue.component('popup',{
    template:`
    <div>
        <button @click="toggle">点击我</button>
        <div v-if="visible">
        <span @click="hide">X</span>
            <h4>title</h4>
            how are you ? i am fine ,thank you , and you?
        </div>
    </div>`,
    methods:{
      toggle:function () {
          this.visible = !this.visible;
      },
      hide:function () {
        this.visible = false;
      }
    },
    data:function () {
        return{
            visible:false,
        }
    }
});


var app= new Vue({
    el:'#app',
})

2、插槽 slots

<style type="text/css">
    .panel{
        max-width:300px;
        border:1px solid #999;
        margin-bottom: 15px;
    }
    .panel>*{
        padding: 15px;
    }
    .panel .title{
        border-bottom:1px solid #999;
    }
    .panel .footer{
        border-top:1px solid #999;
    }
</style>
</head>
<body>
<div id="app">
    <panel>
        <div slot="title">皮囊</div>
        <div slot="content"> 我那个活到99岁的阿太（我外婆的母亲），是个很牛的人。外婆50多岁突然撒手，阿太白发人送黑发人。亲戚怕她想不开，轮流看着。她却不知道哪里来的一股愤怒，嘴里骂骂咧咧，一个人跑来跑去。一会掀开棺材看看外婆的样子，一会到厨房看看那祭祀的供品做得如何，走到大厅听见有人杀一只鸡没割中动脉，那只鸡洒着血到处跳，阿太小跑出来，一把抓住那只鸡，狠狠往地上一摔。
        </div>
        <div slot="footer">更多信息</div>
    </panel>
    <panel>
        <div slot="title">英语问好</div>
        <div slot="content"> how are you ? i am fine ,thank you , and you?</div>
        <div slot="footer">更多信息</div>
    </panel>

</div>
<template id="panel-tpl">
    <div class="panel">
        <div class="title">
            <slot name="title"></slot>
        </div>
        <div class="content">
          <slot name="content"></slot>
        </div>
        <div class="footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

Vue.component('panel',{
    template:'#panel-tpl',
});


var app= new Vue({
    el:'#app',
})

2018年11月10日 关于Vue的混合mixins and 插槽slots

1、混合mixins

2、插槽 slots

猜你喜欢

2018年11月10日关于Vue的混合mixins and 插槽slots