Vue使用的擴充套件

vue2.0提供了vuex進行非父子元件之間的通訊，但在簡單的場景下，可以使用乙個空的vue例項作為**事件匯流排。

實現**示例：

<
div 
id>
<
c1>
c1>
<
c2>
c2>
div>

var bus = new vue(); 　　//
為了方便將bus（空vue）定義在乙個元件中，在實際的運用中一般會新建一bus.js
vue.component('c1',}
',  data: () =>(),
created() );
}});
vue.component('c2',
}});
vue(
},methods: ,
}

//
元件2import bus from './bus'export 
default
},mounted () );    
}    
}

但這種引入方式，經過webpack打包後可能會出現bus區域性作用域的情況，即引用的是兩個不同的bus，導致不能正常通訊

（1）直接將bus注入到vue根物件中

import vue from 'vue'const bus = new
vue()
vue(　　
})

在子元件中通過this.$root.bus.$on()、this.$root.bus.$emit()來呼叫

vue.prototype.bus = new vue();

每個元件都是乙個vue示例，所以每個元件都會有bus屬性，在元件中可以通過 this.bus.$emit、this.bus.$on 來呼叫

vue.component('c2',
}});

參考：**示例：

新增a元件

新增b元件

for="item in items">

js: ....

})

new
vue(
})

語法糖是指用另一種語法替換原先的比較複雜的語法，但實現的功能一樣，這種比較簡單清晰的語法被稱為語法糖。

vue 中的語法糖有：

v-bind 的語法糖是：":"

v-on 的語法糖是："@"

v-model 也是乙個語法糖，v-model = "test" 的實際寫法可以寫成 :value = "test" @input = " test = $event.target.value "

v-slot 的語法糖是："#"，該縮寫只有在有引數時才能用，比如具名插槽：

元件中是有 name 屬性的，元件的 name 屬性主要有以下幾個作用：

在自身元件呼叫自身的時候，可以通過定義name的值進行遞迴呼叫


export default
}

// 下面的 is 後面的名字應該是元件的 name 屬性值

元件在全域性用vue.component()註冊時，全域性 id 自動作為元件的 name。

要求被切換到的元件都有自己的名字，不論是通過元件的name選項還是區域性/全域性註冊。

指定 name 選項的另乙個好處是便於除錯，有名字的元件有更友好的警告資訊。

另外，當在有 vue-devtools，未命名元件將顯示成，這很沒有語義。如果元件有 name 屬性，那在 vue-devtools 中顯示的將是 name 的值，元件樹更有語義。

父子元件之間可以通過 props 進行傳值，在父元件中修改傳過去的值時，在子元件中接收到的 props 值都會隨之發生改變。但是如果把 props 的值賦值給 data 中的資料時，data 中的資料不一定會隨之改變。

當 props 值不是物件時，直接賦值給 data 屬性，data 屬性不會發生響應式改變。比如當 props 值是物件時，如果直接賦值給 data 屬性，data 屬性會發生響應式改變，如果將物件的某個屬性或者直接將某個基本型別值賦值給 data 屬性，此時子元件中該 data 屬性不會發生響應式改變。

總而言之，將物件賦值給 data 屬性會隨之發生改變，將基本型別值賦值給 data 屬性則不會發生響應式改變。

//父元件 parent.vue 
點選修改資料
data() 
}},methods: 
}//子元件 child.vue
props: ['nameprop','humanprop'],    //props值會響應式地發生改變
data()  
}} -- }   //props值 都會響應式地發生改變
}              //data屬性 此時不會改變
}        //這裡會改變
}　　　　　//這裡不會改變

請注意：是子元件中的 data 屬性的資料不會發生響應式改變，但 props 屬性的值都是會響應式改變的。所以如果你不需要修改傳過來的值的話，你也可以直接用 props 屬性的值，而不用賦值給 data 中的屬性值。

上面說到如果將值型別的 props 值賦值給 data 屬性時，data 屬性不會隨著父元件的資料的改變而發生改變，要想解決這個問題，可以通過監聽 props 的值，當 props 的某個值發生改變時，再將其賦值給 data 屬性。

//子元件 child.vue
}              //此時會發生響應式改變
props: ['name','human'],    //props值會響應式地發生改變
data()  
},watch: 
}

當然，如果不需要修改傳遞過來的值時，你也可以直接使用接收的 prop 的值進行操作，而無需賦值給元件的 data，這樣就不用監聽改變了。

Vue使用的擴充套件

vue 擴充套件

Vue學習擴充套件

vue路由使用以及元件擴充套件

Vue使用的擴充套件

vue 擴充套件

Vue學習擴充套件

vue路由使用以及元件擴充套件

相關推薦