Vue 初体验（十）混合 mixins 和插槽slots

最新推荐文章于 2023-06-06 15:54:05 发布

yangzm996

最新推荐文章于 2023-06-06 15:54:05 发布

阅读量776

点赞数

分类专栏： Vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_39448579/article/details/122130270

版权

Vue.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

先来看混合 mixins

未操作前
在这里插入图片描述

鼠标移到bys上

在这里插入图片描述

点击按钮

在这里插入图片描述

在这两个组件中，存在着重复的代码，通过mixins 减少代码工作量

html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- Vue  混合 mixins -->
<div id="app">
<tooltip></tooltip>
<popup></popup>
</div>

<template id="Popuptemp">
<div>
  <button @click="toggle">Popup</button>
  <div v-if="visible">
    <span @click="hide">关闭</span>
    <h4>标题</h4>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore hic maxime excepturi nisi, dolor officia quos soluta et, quod! Exercitationem nostrum quo ut quae, tempora eaque! Repellendus, temporibus vel nisi.
  </div>
</div>
</template>

<script src="vue.js"></script>
<script src="main.js"></script>
</body>
</html>

JS

var base={
  methods:{
    show:function(){
      this.visible=true;
    },
    hide:function(){
      this.visible=false;
    },
    toggle:function(){
      this.visible=!this.visible;
    },
  },
  data:function(){
    return {
      visible:false,
    }
  }
}

Vue.component('tooltip',{
  template:'<div><span @mouseenter="show" @mouseleave="hide">bys</span><div v-if="visible">白岩松</div></div>',
  mixins:[base],

});

Vue.component('popup',{
    template:'#Popuptemp',
    mixins:[base],
    //设置默认属性，会覆盖mixins中的默认属性
    data:function(){
      return {
        visible:false,
      }
    }
});


new Vue({
  el:'#app',
  data:{

  }
})

再来看插槽slots

效果图文字通过html自定义显示

在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .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>
  <!-- Vue 插槽slots-->
<div id="app">
<panel>
  <div slot="title">我第一帅</div>
  <div slot="content">hahahahaha</div>
  <div slot="footer">我滴脚</div>
</panel>

<panel>
  <div slot="title">我第一帅</div>
  <div slot="content">hahahahaha</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>

<script src="vue.js"></script>
<script src="main.js"></script>
</body>
</html>

JS

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


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

yangzm996

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 初体验（十）混合 mixins 和插槽slots

先来看混合 mixins未操作前鼠标移到bys上点击按钮在这两个组件中，存在着重复的代码，通过mixins 减少代码工作量html<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
复制链接

扫一扫