Inheritance and extension of components in Vue2.0 (code example)

The content this article brings to you is about the inheritance and extension of components in Vue2.0 (code examples). It has certain reference value. Friends in need can refer to it. I hope it will help You helped.

This article will introduce the inheritance and extension of components in vue2.0, mainly sharing the usage of slots, mixins/extends and extend.

1. Slot

1. Default slot and anonymous slot

slot is used to obtain the original content in the component. Content, this method is used by parent components to pass "label data" to child components. Sometimes it is useful to provide a default content for a slot. For example, a component might want the button's default content to be "display this content if there is no original content", but also allow the user to override it. Write something else.

  <div>
    <my-hello>180812</my-hello>
  </div>
<template>
  <div>
    <h3>welcome to xiamen</h3>
    <slot>如果没有原内容，则显示该内容</slot>// 默认插槽
  </div>
</template>
<script>
  var vm=new Vue({
      el:&#39;#itany&#39;,
      components:{
      &#39;my-hello&#39;:{
      template:&#39;#hello&#39;
    }
     }
 });    
</script>

2. Named slot

Sometimes we need multiple slots,<slot></slot> The element has a special attribute: name. This feature can be used to define additional slots:

<div>
    <my-hello>
      <ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
      </ul>
      <ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
      </ol>
    </my-hello>
</div>
<template>
    <div>
      <slot></slot>
      <h3>welcome to xiamen</h3>
      <slot></slot>
    </div>
</template>
<script>
  var vm=new Vue({
    el:&#39;#itany&#39;,
    components:{
      &#39;my-hello&#39;:{
         template:&#39;#hello&#39;
       }
    }
 });    
</script>

2. Mixins

1. Introduction to mixins

Mixins are a very flexible way to distribute reusable functionality in Vue components. Mixins can contain arbitrary component options. When a component uses a mixin object, all options of the mixin object will be mixed into the options of the component itself. The mixins option accepts an array of mix objects.

2. Mixins usage

Generally have two uses:

1. After you have written the constructor, you need to add methods or temporary activities. Method, using mixin at this time will reduce source code pollution.

2. Public methods are used in many places. Using the mixing method can reduce the amount of code and achieve code reuse.

For example, the following example: every time the data changes, a prompt will be printed on the console: "Data changes"

    <h1>Mixins</h1>
    <hr>
    <div>
        <p>num:{{ num }}</p>
        <p>
            <button>增加数量<tton>
        </tton></button></p>
    </div>
    <script>
        var addLog = { //额外临时加入时，用于显示日志
            updated: function () {
                console.log("数据发生变化,变化成" + this.num + ".");
            }
        }
        Vue.mixin({// 全局注册一个混入，影响注册之后所有创建的每个 Vue 实例
            updated: function () {
                console.log("我是全局的混入")
            }
        })
        var app = new Vue({
            el: &#39;#app&#39;,
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    this.num++;
                }
            },
            updated() {
                console.log("我是原生的update")
            },
            mixins: [addLog]//混入
        })</script>

3.The calling sequence of mixins

The above example illustrates: In terms of the order of execution, the hook of the mixed object will be called before the component's own hook. If a global mixin is encountered (Vue.mixin), the execution order of global mixins is before mixins and methods in components.

3. extends

1.extends usage

extends option allows the declaration of extending another component without using Vue.extend.
Expand the constructor by adding external objects. It's very similar to mixing in mixins. It’s just that the parameters received are simple option objects or constructors, so extends can only extend one component at a time.

    <h1>Extends</h1>
    <hr>
    <div>
        num:{{ num }}
        <p>
            <button>add</button>
        </p>
    </div>
    <script>
        var bbb = {
            updated() {
                console.log("我是被扩展出来的");
            },
            methods: {
                add: function () {  //跟原生的方法冲突，取原生的方法，这点跟混入一样
                    console.log(&#39;我是被扩展出来的add方法！&#39;);
                    this.num++;
                }
            }
        };
        var app = new Vue({
            el: &#39;#app&#39;,
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    console.log(&#39;我是原生add方法&#39;);
                    this.num++;
                }
            },
            updated() {
                console.log("我是扩展出来的");
            },
            extends: bbb// 接收对象和函数
        })</script>

It can also be seen from the above example that the order of execution is the same as mixins, and additionally extended When the method conflicts with the native method, the extended method will not take effect, which is the same as mixing in.

2.Comparison of priorities between extends and mixins

 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
  })

##It can be concluded that Relative to mixins, extends triggers with a higher priority

4. extend

Vue.extend just creates a constructor, which is to create reusable components. It is mainly used to serve Vue.component and to generate components

<div>
        <hello></hello>
        <my-world></my-world>
    </div>
    <script>
        /**
         * 方式1：先创建组件构造器，然后由组件构造器创建组件
         */
        //1.使用Vue.extend()创建一个组件构造器
        var MyComponent = Vue.extend({
            template: &#39;<h3>Hello World&#39;
        });
        //2.使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件
        Vue.component(&#39;hello&#39;, MyComponent);
        /**
         * 方式2：直接创建组件(推荐)
         */
        // Vue.component(&#39;world&#39;,{
        Vue.component(&#39;my-world&#39;, {
            template: &#39;<h1>你好，世界&#39;
        });
        var vm = new Vue({ //这里的vm也是一个组件，称为根组件Root
            el: &#39;#itany&#39;,
            data: {}
        });    
    </script>

The above is the detailed content of Inheritance and extension of components in Vue2.0 (code example). For more information, please follow other related articles on the PHP Chinese website!