Vue的use的方法
Vue.use(vuex); Vue.use => 當使用第三方組件時，需要使用Vue.use方法；當用這個方法會默認調用裏面的install
Vue.use :可以接受對象和函數
- 如果use傳遞進來一個對象，那麼會默認調用這個對象中的install方法，並且將Vue這個方法傳給其第一個參數； Vue.use({install:function(_vue){}})
- 如果vue直接傳入一個函數，那麼Vue.use就會把這個函數當成install來執行；
<body>
<div id="app">
{{$store.state.count}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vuex/dist/vuex.js"></script>
<script>
// Vue.use
let store = new Vuex.Store({
state:{
count:100
},
mutations:{
addCount(state){
state.count++;
}
},
actoions:{
// 支持異步；在項目中一般在此發送異步請求，當請求數據成功後更改state中的值；
add({commit},payload){
commit("addCount",10)
}
}
});
// Vue.use(vuex);
// Vue.use :可以接受對象和函數
let obj = {
install(vm){
console.log(vm)
}
}
let fn = function(vm){
console.log(vm)
}
Vue.use(fn);
// 1. 如果use傳遞進來一個對象，那麼會默認調用這個對象中的install方法，
並且將Vue這個方法傳給其第一個參數；
// 2. 如果vue直接傳入一個函數，那麼Vue.use就會把這個函數當成install來執行；
let vm = new Vue({
el:"#app",
store// 會給當前實例以及當前實例的所有子孫組件都會新增一個$store屬性；
});
</script>
</body>
Vue中的mixin
Vue.mixin : 混入 把對象中的data合併到每一個組件的data中，如果和組件中的屬性重名，那麼以組件data中值爲準；
還可以把對象中的鉤子函數混入到每一個組件中，並且是先執行混入對象的鉤子函數，再執行組件自己的鉤子函數
如果不重名就是新增，如果重名，則以組件內部的屬性爲準
<body>
<div id="app">
{{name}}
{{msg}}
<button @click="add">新增</button>
<my></my>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vuex/dist/vuex.js"></script>
<script>
// Vue.mixin : 把對象中的data合併到每一個組件的data中，如果和組件中的屬性重名，
那麼以組件data中值爲準；
// 2.還可以吧對象中的鉤子函數混入到每一個組件中，並且是先執行混入對象的鉤子函數，
再執行組件自己的鉤子函數
/// 如果不重名就是新增，如果重名，則以組件內部的屬性爲準
Vue.mixin({
data(){
return {
msg:"hello",
name:"201914"
}
},
beforeCreate(){
console.log("mixin beforeCreate")
},
methods:{
add(){
console.log(888)
}
},
mounted(){
console.log("mixin mounted")
}
});
Vue.component('my',{
// template:"<div></div>"
// render(h){
// // h==> 函數
// // h:第一個參數可以標籤名 對象：行間屬性 標籤的文本內容
// //console.log(h("h1",{class:"bar",a:1},"hello",{c:1}));
// // 這個函數就會返回一個虛擬的DOM，那麼vue再將這個虛擬的DOM轉成
真實的DOM放在頁面上
// //console.log(h);
// return h("h1",{class:"bar",attrs:{id:100}},"hello");
// }
template:"<div>{{msg}}</div>"
})
let vm = new Vue({
el:"#app",
data(){
return {
name:"珠峯"
}
},
methods:{
},
beforeCreate(){
console.log("vm beforeCreate")
},
mounted(){
console.log("vm mounted")
}
});
console.log(vm);
</script>
</body>
局部混入
mixins:[obj]
<body>
<div id="app">
<my></my>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vuex/dist/vuex.js"></script>
<script>
let obj = {
data(){
return {msg:100}
},
created(){
console.log(this);// this :代表當前使用obj這個混入對象的vue實例
}
}
// Vue.mixin({
// data() {
// return {
// msg: 100
// }
// },
// created() {
// console.log(this); // this :代表當前使用obj這個混入對象的vue實例
// // created:有多少個vue實例，created執行多少次，並且每次執行都會指向不同的組件實例
// }
// })
Vue.component('my', {
data() {
return {
a: 100
}
},
template: "<div>{{msg}}</div>",
mixins:[obj]
})
let vm = new Vue({
el: "#app",
data() {
return {
name: "珠峯"
}
},
// mixins:[obj],
methods: {
},
beforeCreate() {
console.log("vm beforeCreate")
},
mounted() {
console.log("vm mounted")
}
});
</script>
</body>