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>
版权声明：本文为Sheng_zhenzhen原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。