Важность взаимодействия компонентов vue само собой разумеется. . . Но всего этого у вас точно нет, поэтому появилась эта вторая статья
реквизит и $emit
Реквизит передается от отца к сыну, $emit передается от сына к отцу, посмотрите на код ниже, ясный, как глаза девушки. . . эммм
Vue.component('child',{
data(){
return {
mymessage:this.message
}
},
template:`
<div>
<input type="text" v-model="mymessage"
@input="passData(mymessage)"> </div>
`,
props:['message'],//得到父组件传递过来的数据
methods:{
passData(val){
//触发父组件中的事件
this.$emit('getChildData',val)
}
}
})
┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┅┄＊
Vue.component('parent',{
template:`
<div>
<p>this is parent compoent!</p>
<child :message="message"
v-on:getChildData="getChildData"></child>
</div>
`,
data(){
return {
message:'张不怂'
}
},
methods:{
//执行子组件触发的事件
getChildData(val){
console.log(val)
}
}
})
┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┅┄＊
// 挂载
var app=new Vue({
el:'#app',
template:`
<div>
<parent></parent>
</div>
`
})
центральный автобус событийnew Bus
Создайте новый объект шины событий Vue, а затем передайтеbus.$emitтриггерное событие,bus.$onСлушайте триггерные события.
Vue.component('brother1',{
data(){
return {
mymessage:'hello brother1'
}
},
template:`
<div>
<p>this is brother1 compoent!</p>
<input type="text" v-model="mymessage"
@input="passData(mymessage)">
</div>
`,
methods:{
passData(val){
//触发全局事件globalEvent
bus.$emit('globalEvent',val)
}
}
})
┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┅┄＊
Vue.component('brother2',{
template:`
<div>
<p>this is brother2 compoent!</p>
<p>brother1传递过来的数据：{{brothermessage}}</p>
</div>
`,
data(){
return {
mymessage:'hello brother2',
brothermessage:''
}
},
mounted(){
//绑定全局事件globalEvent
bus.$on('globalEvent',(val)=>{
this.brothermessage=val;
})
}
})
┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┅┄＊
//中央事件总线
var bus=new Vue();
var app=new Vue({
el:'#app',
template:`
<div>
<brother1></brother1>
<brother2></brother2>
</div>
`
})
обеспечить и ввести
Родительский компонент предоставляет переменную через поставщика, а затем дочерний компонент использует инъекцию для внедрения переменной. Независимо от того, насколько глубоким является дочерний компонент, до тех пор, пока вызывается инъекция, данные в провайдере могут быть внедрены. Вместо того, чтобы ограничиваться только получением данных из свойств свойства текущего родительского компонента, можно вызывать дочерние компоненты, если они находятся в пределах жизненного цикла родительского компонента.
Vue.component('child',{
inject:['parent_var'],//得到父组件传递过来的数据
data(){
return {
mymessage:this.parent_var
}
},
template:`
<div>
{{ message }}
</div>
})
┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┅┄＊
Vue.component('parent',{
template:`
<div>
<child></child>
</div>
`,
provide:{
// 看你想传递啥了，这里不写固定的原因是为了防止限制大家的思维
/*
比如你可以把用户登录信息存储在App.vue中，可以把
provide:{app:this}注入，后续所有组件通过inject:['app'],
就可以直接通过app.userInfo拿到用户信息
*/
parent_var:'随便什么都可以（可以是this,可以是data中的数据）'
},
data(){
return {
message:'hello'
}
}
})
┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┄┅┄┅┄┅┄┅┄＊
var app=new Vue({
el:'#app',
template:`
<div>
<parent></parent>
</div>
`
})
$attrsи $слушатели
Это по-прежнему многоуровневый сценарий, App.vue -> A-> B, что, если приложение напрямую хочет передать данные в B?Vue 2.4начал предоставлять
прослушиватели решают эту проблему, позволяя компоненту App передавать данные непосредственно компоненту B. Я отметил ключевые моменты в коде,// ******关键点*****
app.vue представляет компонент A
<template>
<div id="app">
{{app}}
// ******关键点*****
<A :app="app" @test="doTest"/>
</div>
</template>
<script>
import A from "./components/A";
export default {
name: "App",
data() {
return {
app: "我是App的数据"
};
},
components: {
A
},
methods: {
doTest() {
console.log(this.app)
}
}
};
A.vue представляет компонент B
<template>
<div class="hello">
<h6>这里是A组件</h6>
<p>$attrs: {{$attrs}}</p>
<p>$listeners: {{$listeners}}</p>
// ******关键点***** v-bind传递的都是$attrs,v-on传递的都是$listeners
<B v-bind="$attrs" v-on="$listeners"/>
</div>
</template>
<script>
import B from "./B";
export default {
name: "A",
props: {
msg: String
},
components: { B },
mounted() {
console.log(this.$listeners);
}
};
</script>
компонент Б
<template>
<div class="hello">
<h6>这里是B组件</h6>
// ******关键点*****
<p>$attrs: {{$attrs}}</p>
</div>
</template>
<script>
export default {
name: "B",
props: {
msg: String
},
mounted() {
// ******关键点*****
// 为啥这里直接能emitApp组件传递的test呢？
// 因为在A组件中有一个关键操作是 <B v-bind="$attrs" v-on="$listeners"/>
this.$emit("test");
}
};
</script>
$parentи $дети
Получить экземпляры родительского и дочернего компонентов соответственно
Vue.component('child',{
props:{
value:String, //v-model会自动传递一个字段为value的prop属性
},
data(){
return {
mymessage:this.value
}
},
methods:{
changeValue(){
this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值
}
},
template:`
<div>
<input type="text" v-model="mymessage" @change="changeValue">
</div>
})
Vue.component('parent',{
template:`
<div>
<p>this is parent compoent!</p>
<button @click="changeChildValue">test</button >
<child></child>
</div>
`,
methods:{
changeChildValue(){
this.$children[0].mymessage = 'hello';
}
},
data(){
return {
message:'hello'
}
}
})
var app=new Vue({
el:'#app',
template:`
<div>
<parent></parent>
</div>
`
})
v-model
Когда родительский компонент передает значение дочернему компоненту через v-model, он автоматически передает атрибут value prop, и значение, связанное v-model, автоматически изменяется в дочернем компоненте через this.$emit('input', вал)
Vue.component('child',{
props:{
value:String, //v-model会自动传递一个字段为value的prop属性
},
data(){
return {
mymessage:this.value
}
},
methods:{
changeValue(){
this.$emit('input',this.mymessage); //通过如此调用可以改变父组件上v-model绑定的值
}
},
template:`
<div>
<input type="text" v-model="mymessage" @change="changeValue">
</div>
})
Vue.component('parent',{
template:`
<div>
<p>this is parent compoent!</p>
<p>{{message}}</p>
<child v-model="message"></child>
</div>
`,
data(){
return {
message:'hello'
}
}
})
var app=new Vue({
el:'#app',
template:`
<div>
<parent></parent>
</div>
`
})
трансляция и рассылка
Этот метод предусмотрен в vue1.0, но не в vue2.0, но многие программы с открытым исходным кодом инкапсулируют этот метод сами по себе, например, min ui, element ui, широковещательная передача предназначена для запуска событий в определенный родительский компонент, отправка — в определенные подкомпоненты запускают события.По сути, этот метод по-прежнему использует рекурсивную инкапсуляцию on и emit, но он очень практичен в некоторых базовых компонентах. Примечание. Все названия компонентов не могут повторяться! ! !
function broadcast(componentName, eventName, params) {
this.$children.forEach(child => {
var name = child.$options.componentName;
if (name === componentName) {
child.$emit.apply(child, [eventName].concat(params));
} else {
broadcast.apply(child, [componentName, eventName].concat(params));
}
});
}
function dispatch(componentName, eventName, params) {
var parent = this.$parent;
var name = parent.$options.componentName;
while (parent && (!name && name !== componentName)) {
parent = parent.$parent;
if (parent) {
name = parent.$options.componentName;
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
}
export default {
methods: {
dispatch(componentName, eventName, params) {
dispatch.call(this, componentName, eventName, params);
},
broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
}
}
};
vuex
Я не буду вдаваться в подробности о vuex. . .
Вторая глава представляет собой очень подробное объяснение важного навыка жареной курицы Vue, коммуникации компонентов Я сказал, что эта статья является всеобъемлющей, и у всех не должно быть своего мнения? Хорошо, итак...
Если вы считаете, что это полезно для вас, пожалуйста, нажмите
отличный
, и продолжать выводить такие короткие и эффективные статьи в продолжении, чтобы помочь вам освоить как можно больше контента в кратчайшие сроки.В конце концов, кто не любит сделать это раз и навсегда? ❥(^_-) спасибо~
последующий каталог
Без излишеств vue advanced advanced (1) обзор сути компонентов
Никакой ерунды Vue advanced advanced (2) 8 видов связи компонентов подробное объяснение
Без излишеств Vue advanced advanced (три) расширенного использования и лучшие практики компонентов