vue渐进式框架-事件总线及插槽等

最新推荐文章于 2021-12-20 16:05:33 发布

Ai.ﻮ

最新推荐文章于 2021-12-20 16:05:33 发布

阅读量116

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_48852584/article/details/108455264

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

一、事件总线
二、混入Mixin
三、动态组件
四、异步组件
五、Ref
六、过渡动画
七、插槽

提示：以下是本篇文章正文内容，下面案例可供参考

一、事件总线

事件总线，是为了解决兄弟组件之间的通信问题。

	var bus = new Vue()  // 事件总线
     	bus.$on() 用于接收信息
    	bus.$emit() 用于发送信息
    // 订阅发布模式

二、混入Mixin

作用是：实现组件中选项的复用。

<body>

  <div id="app">
    <qf-child></qf-child>
    <qf-test></qf-test>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 全局混入
    Vue.mixin({
      data: function() {
        return {
          msg: ''
        }
      },
      mounted() {
        console.log('mounted')
      },
      methods: {
        click() {
          console.log('clicked')
        }
      }
    })

    // 局部混入，使用 mixins 这个选项
    var obj = {
      created() {
        console.log('created')
      }
    }

    Vue.component('qf-test', {
      template:`
      <div>
        <h2 @click='click'>我是测试组件</h2>
      </div>
      `,
      // 局部混入
      mixins:[obj]
    })

    var app = new Vue({
      el: '#app',
      components: {
        'qf-child': {
          template:`
          <div>
            <h2 @click='click'>我是子组件</h2>
          </div>
          `,
          mixins:[obj]
        }
      }
    })
  </script>


</body>

三、动态组件

作用：凡是被keep-alive包裹的组件，可保留组件状态，而不是销毁和重置。

      <keep-alive>
        <!-- is属性指向谁，谁就显示出来 -->
        <component :is='tab'></component>
      </keep-alive>

四、异步组件

需要特定的触发条件，才被编译到Vue系统中。

<body>

  <div id="app">
    <qf-child></qf-child>
    <qf-async-child></qf-async-child>


  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
 
    Vue.component('qf-child', {
      template: `
      <div>
        <h1>我是一个组件</h1>
      </div>
      `
    })

    // 异步组件
    Vue.component('qf-async-child', function(resolve, reject){
      setTimeout(function(){
        resolve({
          template: `
          <div>
            <h1>我是一个异步组件</h1>
          </div>
          `
        })
      }, 5000)
    })

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

  </script>


</body>

五、Ref

作用：为我们提供了一种便捷的DOM操作方式
原则：尽可能地减少使用ref，如果使用太多会影响程序性能
使用：给HTML标签或自定义组件添加ref属性，然后在JS脚本中使用this.$refs可以访问当前组件中所有ref节点

<body>

  <div id="app">
    
    <qf-child ref='child'></qf-child>

    <button @click='change'>ref操作</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>

  // ref
  // 作用：为我们提供了一种便捷的DOM操作方式
  // 原则：尽可能地减少使用ref，如果使用太多会影响程序性能
  // 使用：给HTML标签或自定义组件添加ref属性，然后在JS脚本中使用this.$refs可以访问当前组件中所有ref节点

  Vue.component('qf-child', {
    template: `
    <div>
      <h2>我是子组件</h2>
      <h2 v-text='msg'></h2>
    </div>
    `,
    data: function() {
      return {
        msg: 'child msg'
      }
    },
    methods: {
      getMsg() {
        console.log(this.msg)
      },
      initMsg() {
        this.msg = 'hello'
      }
    }
  })

  var app = new Vue({
    el: '#app',
    methods: {
      change() {
        
        // 获取子组件的data属性
        var msg = this.$refs.child.msg
        console.log('super', msg)
        // 调用、触发子组件的methods方法
        this.$refs.child.getMsg()
        this.$refs.child.initMsg()
      }
    }
  })

  </script>


</body>

六、过渡动画

知识点：记住四个时刻(enter/enter-to/leave/leave-to)和两个阶段(enter-active/leave-active)

引入：

<!-- 官网：https://animate.style/ -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">

css:

 /* 显示动画 */
  .xxx-enter {
    opacity: 0;
    color: red;
    font-size: 12px;
  }
  .xxx-enter-active {
    color: blue;
    transition: all 5s ease;
    font-size: 12px;
  }
  .xxx-enter-to {
    opacity: 1;
    color: green;
    font-size: 36px;
  }
  /* 隐藏动画 */
  .xxx-leave {
    opacity: 1;
    color: green;
    font-size: 36px;
  }
  .xxx-leave-active {
    color: blue;
    transition: all 5s ease;
    font-size: 12px;
  }
  .xxx-leave-to {
    opacity: 0;
    color: red;
    font-size: 12px;
  }

html:

<div id='app'>
    <!-- 测试语法，工作中不建议自定义动画 -->
    <button @click='toggle'>显示/隐藏</button>
    <transition name='xxx'>
      <h1 v-show='show'>测试过渡动画的语法</h1>
    </transition>
    <hr>

    <!-- 给单个元素添加动画的写法 -->
    <button @click='toggle2'>显示/隐藏</button>
    <transition
      enter-active-class='animate__animated animate__bounce'
      leave-active-class='animate__animated animate__flash'
    >
      <h1 v-show='show2'>2006</h1>
    </transition>
    
    <hr>

    <!-- 给多个元素添加动画的写法 -->
    <button @click='toggle3'>显示/隐藏</button>
    <transition
      enter-active-class='animate__animated animate__bounce'
      leave-active-class='animate__animated animate__flash'
      mode='out-in'
    >
      <h1 v-if='show3' key='1'>2006</h1>
      <h1 v-else key='2'>2007</h1>
    </transition>

</div>

js:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
 
  var app = new Vue({
    el: '#app',
    data: {
      show: true,
      show2: true,
      show3: true
    },
    methods: {
      toggle() {
        this.show = !this.show
      },
      toggle2() {
        this.show2 = !this.show2
      },
      toggle3() {
        this.show3 = !this.show3
      }
    }
  })

  </script>

七、插槽

作用：在自定义封装组件时特别有用，占一个空位。
#是v-slot的简写

css:

 html,body {
      padding: 0;
      margin: 0;
      background: rgba(29, 31, 33, 1);
    }
    .modal {
      width: 300px;
      margin: 20px auto;
      border: 1px solid #ccc;
      padding: 25px;
      color: black;
      background: white;
      border-radius: 5px;
    }
    .modal-header {
      line-height: 30px;
      height: 30px;
      overflow: hidden;
    }
    .modal-header span:last-child {
      float: right;
      cursor: pointer;
    }
    .modal-header span:first-child {
      float: left;
    }
    .modal-content {
      padding: 15px 0;
    }
    .modal-footer>div:first-child span {
      float: right;
      margin-left: 10px;
    }
    .modal-footer span {
      display: inline-block;
      padding: 0 15px;
      line-height: 28px;
      border-radius: 5px;
      cursor: pointer;
      border: 1px solid #aaa;
    }
    .modal-footer span.confirm {
      color: white;
      background-color: blue;
      border-color: blue;
    }
    .modal-footer span.delete {
      color: white;
      background-color: red;
      border-color: red;
    }

html:

<div id="app">
    <qf-modal>
      <!-- #是v-slot的简写 -->
      <!-- 被template包裹的内容，会放在一个名字叫header的slot进行显示 -->
      <template #header>
        <span>温馨提示</span>
      </template>
      <template #content>
        <div>你确定要删除吗？</div>
      </template>
      <template #footer>
        <span>取消</span>
        <span class='delete'>删除</span>
      </template>
    </qf-modal>

    <qf-modal>
      <template #header>
        <span>提示</span>
      </template>
      <template #content>
        <div>
          <input type="text">
        </div>
      </template>
      <template #footer>
        <span>取消</span>
        <span class="confirm">确定</span>
      </template>
    </qf-modal>
</div>

js:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>

  Vue.component('qf-modal', {
    template:`
    <div class='modal'>
      <div class='modal-header'>
        <span>
          <slot name='header'></slot>
        </span>
        <span>X</span>
      </div>
      <div class='modal-content'>
        <slot name='content'></slot>
      </div>
      <div class='modal-footer'>
        <div><slot name='footer'></slot></div>
        <div style='clear:both;'></div>
      </div>
    </div>
    `
  })
  var app = new Vue({
    el: '#app'
  })
</script>