Vue2.0中組件的繼承與擴(kuò)展是什么

發(fā)布時間：2020-12-07 14:04:09 來源：億速云閱讀：428 作者：小新欄目：web開發(fā)

小編給大家分享一下Vue2.0中組件的繼承與擴(kuò)展是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、slot

1.默認(rèn)插槽和匿名插槽

slot用來獲取組件中的原內(nèi)容，此方式用于父組件向子組件傳遞“標(biāo)簽數(shù)據(jù)”。有的時候為插槽提供默認(rèn)的內(nèi)容是很有用的,例如，一個<my-hello> 組件可能希望這個按鈕的默認(rèn)內(nèi)容是“如果沒有原內(nèi)容，則顯示該內(nèi)容”，但是同時允許用戶覆寫為別的內(nèi)容。

<body>
  <div id="itany">
    <my-hello>180812</my-hello>
  </div>
<template id="hello">
  <div>
    <h4>welcome to xiamen</h4>
    <slot>如果沒有原內(nèi)容，則顯示該內(nèi)容</slot>// 默認(rèn)插槽
  </div>
</template>
<script>
  var vm=new Vue({
      el:'#itany',
      components:{
      'my-hello':{
      template:'#hello'
    }
     }
 });    
</script>

Vue2.0中組件的繼承與擴(kuò)展是什么

2.具名插槽

有些時候我們需要多個插槽,<slot> 元素有一個特殊的特性：name。這個特性可以用來定義額外的插槽：

<div id="itany">
    <my-hello>
      <ul slot="s1">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
      </ul>
      <ol slot="s2">
    <li>111</li>
    <li>222</li>
    <li>333</li>
      </ol>
    </my-hello>
</div>
<template id="hello">
    <div>
      <slot name="s2"></slot>
      <h4>welcome to xiamen</h4>
      <slot name="s1"></slot>
    </div>
</template>
<script>
  var vm=new Vue({
    el:'#itany',
    components:{
      'my-hello':{
         template:'#hello'
       }
    }
 });    
</script>

Vue2.0中組件的繼承與擴(kuò)展是什么

二、mixins

1.mixins簡介

混入 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式。混入對象可以包含任意組件選項。當(dāng)組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。mixins 選項接受一個混合對象的數(shù)組。

2.mixins用途

一般有兩種用途：

1、在你已經(jīng)寫好了構(gòu)造器后，需要增加方法或者臨時的活動時使用的方法，這時用混入會減少源代碼的污染。

2、很多地方都會用到的公用方法，用混入的方法可以減少代碼量，實現(xiàn)代碼重用。

例如下面的例子：實現(xiàn)每次數(shù)據(jù)變化時都能夠在控制臺打印出提示："數(shù)據(jù)發(fā)生變化"

    <h2>Mixins</h2>
    <hr>
    <div id="app">
        <p>num:{{ num }}</p>
        <P>
            <button @click="add">增加數(shù)量<tton>
        </P>
    </div>
    <script type="text/javascript">
        var addLog = { //額外臨時加入時，用于顯示日志
            updated: function () {
                console.log("數(shù)據(jù)發(fā)生變化,變化成" + this.num + ".");
            }
        }
        Vue.mixin({// 全局注冊一個混入，影響注冊之后所有創(chuàng)建的每個 Vue 實例
            updated: function () {
                console.log("我是全局的混入")
            }
        })
        var app = new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    this.num++;
                }
            },
            updated() {
                console.log("我是原生的update")
            },
            mixins: [addLog]//混入
        })

Vue2.0中組件的繼承與擴(kuò)展是什么

3.mixins的調(diào)用順序

上例說明了：從執(zhí)行的先后順序來說，混入對象的鉤子將在組件自身鉤子之前調(diào)用，如果遇到全局混入(Vue.mixin)，全局混入的執(zhí)行順序要前于混入和組件里的方法。

三、extends

1.extends用法

extends選項允許聲明擴(kuò)展另一個組件，而無需使用 Vue.extend。
通過外部增加對象的形式，對構(gòu)造器進(jìn)行擴(kuò)展。它和混入mixins非常的類似。只不過接收的參數(shù)是簡單的選項對象或構(gòu)造函數(shù),所以extends只能單次擴(kuò)展一個組件。

    <h2>Extends</h2>
    <hr>
    <div id="app">
        num:{{ num }}
        <p>
            <button @click="add">add</button>
        </p>
    </div>
    <script type="text/javascript">
        var bbb = {
            updated() {
                console.log("我是被擴(kuò)展出來的");
            },
            methods: {
                add: function () {  //跟原生的方法沖突，取原生的方法，這點跟混入一樣
                    console.log('我是被擴(kuò)展出來的add方法！');
                    this.num++;
                }
            }
        };
        var app = new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    console.log('我是原生add方法');
                    this.num++;
                }
            },
            updated() {
                console.log("我是擴(kuò)展出來的");
            },
            extends: bbb// 接收對象和函數(shù)
        })

Vue2.0中組件的繼承與擴(kuò)展是什么

從上面的例子也可看出，執(zhí)行的先后順序和mixins一樣，另外擴(kuò)展的方法與原生的沖突時，擴(kuò)展的方法不生效，這點跟混入一樣。

2.extends和mixins優(yōu)先級比較

 var extend={
    data:{extendData:'我是extend的data'},
    created:function(){
      console.log('這是extend的created');
    }
  }
  var mixin={
    data:{mixinData:'我是mixin的data'},
    created:function(){
      console.log('這是mixin的created');
    }
  }
  var vm=new Vue({
    el:'#app',
    data:{mixinData:'我是vue實例的data'},
    created:function(){
      console.log('這是vue實例的created');
    },
    methods:{
      getSum:function(){
        console.log('這是vue實例里面getSum的方法');
      }
    },
    mixins:[mixin],
    extends:extend
  })

Vue2.0中組件的繼承與擴(kuò)展是什么

由此可以得出，相對于mixins,extends觸發(fā)的優(yōu)先級更高

四、extend

Vue.extend只是創(chuàng)建一個構(gòu)造器,它是為了創(chuàng)建可復(fù)用的組件。其主要用來服務(wù)于Vue.component，用來生成組件

<div id="itany">
        <hello></hello>
        <my-world></my-world>
    </div>
    <script>
        /**
         * 方式1：先創(chuàng)建組件構(gòu)造器，然后由組件構(gòu)造器創(chuàng)建組件
         */
        //1.使用Vue.extend()創(chuàng)建一個組件構(gòu)造器
        var MyComponent = Vue.extend({
            template: '<h4>Hello World</h4>'
        });
        //2.使用Vue.component(標(biāo)簽名,組件構(gòu)造器)，根據(jù)組件構(gòu)造器來創(chuàng)建組件
        Vue.component('hello', MyComponent);
        /**
         * 方式2：直接創(chuàng)建組件(推薦)
         */
        // Vue.component('world',{
        Vue.component('my-world', {
            template: '<h2>你好，世界</h2>'
        });
        var vm = new Vue({ //這里的vm也是一個組件，稱為根組件Root
            el: '#itany',
            data: {}
        });    
    </script>

以上是“Vue2.0中組件的繼承與擴(kuò)展是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

Vue2.0中組件的繼承與擴(kuò)展是什么

2.具名插槽

二、mixins

1.mixins簡介

2.mixins用途

3.mixins的調(diào)用順序

三、extends

1.extends用法

2.extends和mixins優(yōu)先級比較

四、extend

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

二、mixins

三、extends