Vue2.0의 구성 요소 상속 및 확장(코드 예)

이 기사의 내용은 Vue2.0의 구성 요소 상속 및 확장에 대한 것입니다(코드 예제). 필요한 친구들이 참고할 수 있기를 바랍니다.

이 기사에서는 vue2.0의 구성 요소 상속 및 확장을 소개하며 주로 슬롯, 믹스인/확장 및 확장의 사용법을 공유합니다.

1. 슬롯

1. 기본 슬롯 및 익명 슬롯

슬롯은 구성 요소의 원본 콘텐츠를 가져오는 데 사용됩니다. 이 방법은 "레이블 데이터"를 하위 구성 요소에 전달하는 데 사용됩니다. . 때로는 슬롯에 대한 기본 콘텐츠를 제공하는 것이 유용할 수 있습니다. 예를 들어 그것을 무시하십시오.

  <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. 명명된 슬롯

때때로 여러 개의 슬롯이 필요한 경우 <slot></slot> 요소에는 이름이라는 특별한 기능이 있습니다. 이 기능은 추가 슬롯을 정의하는 데 사용할 수 있습니다: <slot></slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：

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

二、mixins

1.mixins简介

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。mixins 选项接受一个混合对象的数组。

2.mixins用途

一般有两种用途：

1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。

2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

例如下面的例子：实现每次数据变化时都能够在控制台打印出提示："数据发生变化"

    <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.mixins的调用顺序

上例说明了：从执行的先后顺序来说，混入对象的钩子将在组件自身钩子之前调用，如果遇到全局混入(Vue.mixin)，全局混入的执行顺序要前于混入和组件里的方法。

三、extends

1.extends用法

extends选项允许声明扩展另一个组件，而无需使用 Vue.extend

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

2. Mixins1. mixins 소개

Mixins는 Vue 구성 요소에 재사용 가능한 기능을 배포하는 매우 유연한 방법입니다. 믹스인에는 임의의 구성요소 옵션이 포함될 수 있습니다. 구성 요소가 mixin 개체를 사용하면 mixin 개체의 모든 옵션이 구성 요소 자체의 옵션에 혼합됩니다 . mixins 옵션은 믹스 객체의 배열을 허용합니다.

2. 믹스인의 용도

일반적으로 두 가지 용도가 있습니다.

1. 생성자를 작성한 후 임시 활동을 위한 메서드나 메서드를 추가해야 합니다. 이때 믹스인을 사용하면 소스 코드의 오염이 줄어듭니다. . 2. 공용 메소드는 여러 곳에서 사용됩니다. 혼합 메소드를 사용하면 코드 양을 줄이고 코드 재사용을 달성할 수 있습니다.

예를 들어, 다음 예: 데이터가 변경될 때마다 콘솔에 "데이터가 변경되었습니다"라는 메시지가 인쇄됩니다.

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

3.mixins 호출 시퀀스

위의 예는 다음과 같습니다.

주문부터 실행 순서대로, 혼합 객체의 후크는 컴포넌트 자체의 후크보다 먼저 호출됩니다. 글로벌 믹스인(Vue.mixin)이 발생하면 글로벌 믹스인의 실행 순서는 다음과 같습니다. 믹스인과 구성 요소의 메서드 이전에.

3.extends

1.extends 사용법🎜🎜extends 옵션을 사용하면 Vue.extend를 사용하지 않고도 다른 구성 요소의 확장을 선언할 수 있습니다. 🎜외부 개체를 추가하여 생성자를 확장합니다. 이는 믹스인을 믹싱하는 것과 매우 유사합니다. 🎜수신된 매개변수는 단순한 옵션 개체 또는 생성자이므로 확장은 한 번에 하나의 구성 요소만 확장할 수 있습니다. 🎜🎜

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

🎜🎜🎜🎜🎜🎜🎜🎜위 예시에서도 알 수 있듯이 실행 순서는 믹스인과 동일합니다. 또한, 확장 메소드가 원본 메소드와 충돌할 경우 확장 메소드는 취하지 않습니다. mixin과 동일한 효과입니다. 🎜🎜2. 확장 및 믹스인의 우선순위 비교🎜rrreee🎜🎜🎜🎜🎜🎜🎜🎜 🎜믹스인에 비해 확장 트리거의 우선순위가 더 높다는 결론을 내릴 수 있습니다🎜🎜🎜4. 재사용 가능한 구성 요소를 만들려면 생성자를 만드세요. 주로 Vue.comComponent를 제공하고 구성 요소를 생성하는 데 사용됩니다🎜rrreee🎜🎜🎜🎜 🎜

위 내용은 Vue2.0의 구성 요소 상속 및 확장(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!