Vue JS mixins — Миксины

Vue JS mixins — Миксины

От автора: Vue mixin — миксины — в основном, используются с компонентами. Они помогают многократно использовать код внутри компонентов. Если компонент использует миксин, то все параметры миксина становлятся частью параметров компонента.

Пример

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "databinding"></div>
 <script type = "text/javascript">
 var vm = new Vue({
 el: '#databinding',
 data: {
 },
 methods : {
 },
 });
 var myMixin = {
 created: function () {
 this.startmixin()
 },
 methods: {
 startmixin: function () {
 alert("Welcome  to mixin example");
 }
 }
 };
 var Component = Vue.extend({
 mixins: [myMixin]
 })
 var component = new Component();
 </script>
 </body>
</html>

Результат

Когда параметра миксина и компонента совпадают, то они сливаются, как в следующем примере.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее
<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "databinding"></div>
 <script type = "text/javascript">
 var mixin = {
 created: function () {
 console.log('mixin called')
 }
 }
 new Vue({
 mixins: [mixin],
 created: function () {
 console.log('component called')
 }
 });
 </script>
 </body>
</html>

Теперь миксин и экземпляр vue имеют один и тот же созданный метод. Результат мы можем увидеть в консоли. Как видим, параметры экземпляра vue и миксина сливаются.

Если у нас будет одно и то же имя функции в методе, то основной экземпляр vue будет иметь приоритетное значение. Пример

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "databinding"></div>
 <script type = "text/javascript">
 var mixin = {
 methods: {
 hellworld: function () {
 console.log('In HelloWorld');
 },
 samemethod: function () {
 console.log('Mixin:Same Method');
 }
 }
 };
 var vm = new Vue({
 mixins: [mixin],
 methods: {
 start: function () {
 console.log('start method');
 },
 samemethod: function () {
 console.log('Main: same method');
 }
 }
 });
 vm.hellworld();
 vm.start();
 vm.samemethod();
 </script>
 </body>
</html>

Мы видим, что миксин содержит свойство method, в котором определяются функции helloworld и samemethod. А экземпляр vue содержит свойство methods, в котором, опять же, определяются два метода start и samemethod. Вызывается каждый из следующих методов.

vm.hellworld(); // В HelloWorld
vm.start(); // метод start
vm.samemethod(); // Основной: same method

Как показано выше, мы вызвали функции helloworld, start и samemethod. samemethod также присутствует в миксине, однако, приоритет будет иметь основной экземпляр.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree