файл

Автор | Jeskson

Источник | Dada передний конец Бистро

Обзор Вьет сборки

Какова его компонента, понимает компонент объект анализа, данные атрибуты Вьют сборки, принцип реквизита в данной передаче, в конце концов, что это такое.

Те вещи, события, общение

Как понять компоненты связи событий и его сын, а его сын столкнулся с компонентами без событий связи, как иметь дело с.

Какого черта тип компонента

Пользовательский компонент способ связывания v-модель, динамические компоненты, и как называется динамической, почему это динамический, рекурсивные компоненты, как понять рекурсию.

Подробнее сборки Vue

Вьет понимание, что я могу найти vue.js- объяснить, что три популярные рамок VUE_ быстро расширенного переднего конец большого кофе -Vue основы, компонент является компонентом, который записывается в их собственной части функции пакета хорошо, написать свой собственный называемые компоненты, написанный кем-то еще называют использование сменных компонентов, является одним из vue.js мощного, имеет компонент для улучшения повторного использования кода, компоненты являются частью полного блага, если вы хотите использовать, вы можете положить у вас есть до любого проекта, сократить дублирование написания кода.

Может быть введена непосредственно туда, где вы хотите использовать не уменьшаются повторяющееся развития, компоненты кода могут быть разделены в соответствии с шаблоном формы, стиль, сценарием, и поместить соответствующий файл.

Какой шаблон что? Это шаблон (шаблон), шаблон, объявленный данные и окончательная презентация отношения отображения между йотом пользователя, какими инициализациями данных данных? Начальное состояние данных компоненты, компонент может быть повторно использован для него, как правило, в частное состоянии, методы метода является способом работы данных приема внешнего параметра между компонентами, чтобы передавать данные и долю параметр реквизита, параметр по умолчанию является одним из способов связывания, может быть двухсторонним связыванием.

Обратный вызов функции, компонент может вызвать множество обратных вызовов, созданный (), прикрепленный (), разрушен ().

Vue компоненты, глобальная регистрация и частичная регистрация

Глобальный регистровый файл, создавать Vue.component ( «имя компонента», параметры компонента {}) режим

<body>
 <div id="app">
  <my-component></my-component>
 </div>
 <script src="https://unpkg.com/vue"></script>
 <script>
 // 创建全局组件
 Vue.component('my-component",{
 // template: 组件的HTML代码结构
 template: '<div>this is dada</div>'
});
// Vue实例对象
var vm = new Vue({
 el: '#app'
});
</script>
</body>

Локальный компонент регистрации, не каждый компонент необходим глобальный регистр может быть непосредственно в экземпляре конструктора ви объекта, через compontent ключевых слов, зарегистрированные пользовательские компоненты.

<div id="app">
 <local-component></local-component>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
// Vue实例UI小
var vm = new Vue({
 el: '#app',
 // 创建局部组件
 components: {
  'my-components': {
   template: '<div>this is my</div>'
   }
  }
 }
});

Во-первых, создать локальный объект компонента, а затем зарегистрировать Вью конструктор зарегистрирован локальный объект компонента, и, наконец, использование местных компонентов.

<div id="app">
 // 在默认情况，使用camel标记法将ui自动转换为短横线形式
 <local-component></local-component>
</div>

<script src="https://unpkg.com/vue"></script>

<script>
// 创建局部组件
const localComponent = {
 template: '<div>this is da</div>'
}

// vue实例对象
var vm = new Vue({
 el: '#app',
 // 创建只对当前vue实例对象有效的局部组件
 components: {
  // 注册组件
  localcomponent
 }
});
</script>

var vm = new Vue({
 el: '#app',
 // 创建局部组件
 components: {
  // 注册组件
  'my-component': localComponent
 }
});

Анализ составных объектов

Вью Вью является экземпляр компонента:

// 自定义组件
var dada = Vue.component('my-component', {
 template: '<h1>dada</h1>'
});

Сборка имеет только один корневой элемент этой линии также:

// 自定义
const dada = Vue.component('my-component', {
 template: `
  <div>
   <span>达达前端</span>
   <p> this is da</p>
  </div>
  `
});

Используя тег шаблона сборки:

<div id='app'>
 <h1>my-component</h1>
 <my-component></my-component>
</div>

<template id="my">
 <div>this is dada</div>
 <p>this is dadadada</p>
</template>

<script..></script>

<script>
 // 自定义组件
 const my = Vue.component('my-component", {
  template: '#my'
 });
 // vue实例对象
 var vm = new Vue({
  el: '#app'
 });
</script>

// 会出现程序错误
因为vue组件只允许有一个根元素。

组件template属性中包含div与P两个元素

<template id="my">
 // 组件只允许有一个根元素
 <div>
  <div>da</div>
  <p>da</p>
 </div>
</template>

// 成功

компоненты свойство данных вю

В сборке любой допустимый экземпляр объекта недвижимости Вью. Свойство данных реагирующие Vue доступных компонентов данных, который является примером объекта данных Вью. После создания экземпляров, пользователи могут Vm. Доступ $ данных к исходному объекту данных, примеры Vue также представляют собой все атрибуты данных.

Это эквивалентно vm.a Vm. $ Data.a, «_» или «$» в начале атрибутов не агент Вью пример, так как они могут конфликтовать и встроенный в собственности и метод ИПН Вью.

// 创建一个实例
var vm = new Vue({
 data: data
})
vm.a // => 1
vm.$data === data // => true

// Vue.extend()中的data
var Component = Vue.extend({
 data: function() {
  return { a: 1 }
 }
})

возврата имущества данные должны быть объявлены в зависимости от исходного объекта данных.


<div id="app">
 <h1>my-component</h1>
 <my-component></my-component>
 <h2>my</h2>
 <my-component></my-component>
</div>

<template id="my">
 <div>
  <div>this is my</div>
  <p>this is da</p>
  <p>{{message}}</p>
  <button @click="message = 'update message'">
  修改
  </button>
 </div>
</template>

<script src="https://unpkg.com/vue"></script>

<script>
 var data={
  message: 'global'
 }
 // 全局组件
 const my = Vue.component('my-component', {
  template: '#my',
  // data属性表示当前组件使用的数据信息
  // data属性必须是回调函数形式，在回调函数中要返回对象
  data: function() {
   return data;
  }
});
 // Vue实例对象
 var vm = new Vue({
  el: '#app'
 });
</script>

// 全局组件
const my = Vue.component('my-component',{
 template: '#my',
 // data属性表示当前组件使用额数据信息
 // data属性必须是回调函数形式，在回调函数中要返回对象
 // data属性应该返回一个都有的对象
 data: function() {
  return {
   message: 'component-message'
  };
 }
});

реквизит передачи данных

Родительский реквизит, используемый для связи между компонентами и подкомпонент, представляет собой поле в компоненте данных, подсборка реквизит, используемый для получения данных родительского элемента, реквизит может быть буквальном синтаксис, грамматика динамического связывания модификаторов и тому подобные.

реквизит буквальными, данные родительского компонент узлов сборки, которые будут получены в заявлении реквизита, компоненты узлов сборки материнских, используемые для передачи данных атрибута HTML через сборочный узел.

Подкомпоненты:

const my = {
 // props:声明接收父组件数据
 props: ['message'],
 // data一样
 template: '<span>{{message}}</span>'
}

Родитель компонент:

<my-component message="message from parent by props">
<my-component>

const my = {
 props: ['myMessage'];
 template: '<span>{{message}}</span>'
}
<my-component my-message="hello"></my-component>

子组件props指明数据
Vue.component("my-component",{
 props: ['message'],
 template: '<span>{{message}}</span>'
});
<my-component alt="this is add"></my-component>

Динамический синтаксис:

<div id="app">
 <my-component v-bind:message="message">
 </my-component>
 <my-component :message="message">
 </my-component>
</div>

v-связывания HTML директивы свойство связано с одним выражением, используя V-связывания реквизита ИНСТРУКЦИЯ динамически связываемые данные для родительского компонента.

var vm = new Vue({
 el: '#app',
 data: {
  user: {
   name: 'test',
   age: '12'
  }
 }
});

<div id="app">
<my-component :user="user"></my-component>
<my-component user="user"></my-comoponent>
</div>

Связывание Модификатор

При изменении атрибутов родительского компонента, будут переданы сборочного узла

// 默认单向绑定
<child :message="parentMessage"></child>
// 双向绑定
<child :message.sync="parentMessage"></child>
// 单向绑定
<child :message.once="parentMessage"></child>

// 在子组件中修改props都会影响父组件的状态
<div id="example">
 <input type="text" v-model="info.name"/>
 <child v-bind:msg.once = "info"></child>
</div>
<script src="vue.js"></script>

<script>
// 创建根实例
var vm = new Vue({
 el: '#example',
 data: function() {
  return {
   info: {
   name: 'hello'
   }
  }
 },
 components: {
  'child': {
   //声明props
   props: ['msg'],
   template: '<div>{{msg.name}}</div>'
  }
 }
});
</script>

Vue.component('example', {
 props: {
  propsA: 'null',
  // 多种类型
  propM: [String, Number],
  // 必须是字符串
  propB: {
   type: String,
   required: true
  },
  propc: {
   type:Number,
   default: 100
  },
  propD: {
   type: Object,
   default: function() {
    return {msg: 'hello'}
   }
  },
  // 指定props为双向绑定
  propE: {
   twoWay: true
  },
  propF: {
   validator: function() {
    return value > 10
   }
  }
 });

тип 类型: строка, число, логическое значение, объект, функцию, массив.

Тип может быть пользовательский конструктор.

Реквизит для определения функции принуждать ()

Vue.component('example', {
props: {
 // 转换函数
 propG: {
  coerce: function(val) {
   return val+''
  }
 },
 propH: {
  coerce: function(val){
   return JSON.parse(val)
  }
 }
}
})

Инцидент связи

коммуникационный компонент события Sons будет использоваться в HTML будет иметь некоторые атрибуты элементов, передавать данные родительского компонента с помощью реквизита узла, сборочный узел посылает сообщение родительского компонента с помощью событий.

А Данные субблок должно быть определением реквизита, родительский компонент передачи данных к свойству данных атрибутов внутри сборочного узла.

// 父组件向子组件传递数据
<my-component :item="users"></my-component

Vue.component('example',{
 template: `<div><button @click="myclick"></button></div>`,
 methods: {
  myclick: function() {
  }
 }
});

Компоненты Родительские передавать данные узла

Суб-сборочный компонент отправляет сообщение родителя может использовать пользовательский VUE механизма событий.

Основные суб-компоненты, используя $ испускают события триггера для родительского компонента.

Родитель компонент, используя $ или v-на инструкции для прослушивания событий, вызванных подузлов, узлов и получать сообщения, отправленные.

<div id="app">
 <my-component @childevent="handleEvent"></my-component>
</div>

Vue.component('my-component',{
template: '#my-component',
props: ['value'],
methods: {
 emitEvent: function() {
  console.log('child component click event');
  this.$emit('childevent');
 }
}
});

Vue.component('my-component',{
template: '#my-component',
props: ['value'],
methods: {
 emitEvent: function() {
  console.log('child component click event');
  this.$emit('childevent');
 }
}
});

emitEvent: function() {
 this.$emit('childevent','附加数据')
}
handleEvent：function(){
 console.log(arguments[0]);
}

Отправить сообщение для родительских компонентов подсборки. События родительского компонента $ или v-на монитор Подкомпоненты срабатывает, сообщение, посланное приемно сборочного узла.

<div id="app">
// 使用组件
<my-component :message="message" @my-component-event="handleMyComponentEvent">
</my-component>
<p>message==={{message}}</p>
</div>

<template id="my">
<div>
<p>{{message}}</p>
<p>
 <button @click="handleClick"></button>
</p>
</div>
</template>

<script>
const myComponent={
template: '#my',
props:['message'],
methods:{
handleClick: function(){
this.$emit('my-component-event','updata');
}
}
};
// Vue实例对象
var vm = new Vue({
el: '#app',
data: {
message: 'from parent'
},
// 注册组件
components: {
 myComponent
},
// 方法
methods: {
 // 接收子组件定义事件处理
 handleMyComponentEvent: function(param){
 this.message=arguments[0];
 }
}
});

Компоненты Sons связи не-событий

Передача данные в исходных компонентах подузлов по реквизиту, сборочные динамически изменять инициирующее событие для родительского компонента с помощью пользовательских событий.

Связь между компонентами не-отец и сын

Сборочный узел, или с помощью $ $ родительского корня, или корневого доступ к родительскому объекту текущего экземпляра компонента сборки.

это. $ родительский родительский компонент
этого. $ корень корневого компонента


var vm = new Vue({
 el: '#app',
 data: {
  message: 'message'
 },
 components: {
  childComponent
 }
});

const childComponent={
 template:'',
 methods:{
 updateRootMessage: function(){
  this.$root.message='message from child';
 }
}
};

родителей Доступ компонентов сборочные, используя атрибут реф, посетите узел этим. $ Refs

<div id="app">
 <child-component ref="childComponent">
 </child-component>
</div>


var vm = new Vue({
 el: '#app',
 components: {
  childComponent
 },
 methods: {
  updateChild: function(){
   this.$refs.childComponent.message="from parent";
  }
 }
});

механизм Bus Event

Подписка на монитор, вызывая Emit. По пути на прослушивать событие, используйте испускает метод, чтобы вызвать это событие, при вызове этого метода на функции обратного вызова, завершив тем самым инициирующее событие.

var dada = new Vue()
// 触发组件a中的事件
dada.$emit('id-selected',1)
// 触发b创建的函数中监听事件
dada.$on('id-selected', function(id){
})

Создать учетные объекты шины события

var dada = new Vue()

Прослушивание событий, вызванных шиной событий

dada.$on

Trigger пользовательские события

dada.$emit


<div id="app">
<child1-component></child1-component>
<child2-component :message="message" ref="child2">
</child2-component>
</div>

<template id="child1">
<div>
<button @click="updateChild2">da</button>
</div>
</template>

<template id="child2">
<div>
message={{message}}
<p>{{name}}</p>
</div>
</template>

<script src="https://unpkg.com/vue">更新2的内容</script>

<script>
const dada = new Vue();
// 创建组件
const child1Component={
 template: '#child1',
 methods: {
  updaeChild2: function(){
   // 使用事件总线触发自定义事件
   dada.$emit('child1-event','update name from child1');
  }
 }
};

const child2Component = {
 template: '#child2',
 props: ['message'],
 data: function() {
  return {
   name: 'child2'
  };
 },
 created: function() {
 // 保留当前vue组件对象
 const app = this;
 // 监听事件总线触发的事件
 bus.$on('child1-event', function(param){
  console.log('捕获');
  app.name = param;
 });
}
};
</script>

❤️ Не забудьте оставить свои следы обучения [+ приемный пункт Как Комментарии +]

Информация об авторе:

[Автор]: Jeskson
[оригинал] Общественный номер: Dada передний конец бистро.
[Благосостояния]: Нет общественного ответа «Информация» самообучения материалы направлены гулянки (в группе на долю того, что вы хотите сказать , Ха, я не видел)!
[Зарезервировано] Описание: Приводимый пожалуйста , укажите источник, спасибо! ~

Большое передний конец развитие, передний конец технология позиционирования развития стека блог, PHP фоновых знания, веб-технология полного стека поле, структуры данных и алгоритмы, и так легко понять теорию сети представляются младшим партнер. Спасибо вам поддержку, любезно любви! ! !

Если это число локальных содержимые не получает биты (например, авторское право или другие проблемы), пожалуйста, свяжитесь с нами для выпрямления может быть своевременно и будет обработано в первый раз.

Пожалуйста, недурно! Потому что вы согласны с / поощрением является величайшей силой моего письма!

Добро пожаловать внимание на Dada «s CSDN!

Это качество, отношение блог

Интерфейсный набор технологий

Давай! Статья тщательно, чтобы получить VUE сборки!