Mixins是对父组件的扩充，Extend扩展组件的构造器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>扩展</title>
<script src="vue.js"></script>
</head>
<body>
<!-- mixins 是对父组件的扩充，包括methods、components、directive等。。。
触发钩子函数时，先调用mixins的函数，再调用父组件的函数。
虽然也能在创建mixin时添加data、template属性，但当父组件也拥有此属性时以父为准，
从这一点也能看出制作者的用心（扩充）。data、methods内函数、components和directives
等键值对格式的对象均以父组件/实例为准 -->
<!-- extend 扩展组件的构造器，extend创建的是一个组件构造器，而不是一个具体的组件,
实例最终还是要通过Vue.components注册才可以使用的 -->
<div id="app"></div>
<script>
//扩展属性和方法
Vue.mixin({
methods: {
getName: function() {
return '返回名字'
},
timer: function(sec, back) {
console.log('计时器启动成功')
}
}
})
var vm = new Vue({
el: '#app',
created: function() {
this.timer()
}
})
//扩展组件
var todoWarp = Vue.extend({
template: `
<ul>
<todo-item
v-for="(item, index) in todoData"
v-text="item.text"
></todo-item>
</ul>
`,
props: {
todoData: {
type: Array,
default: []
}
}
})
// 注册到全局
Vue.component('todo', todoWarp)
</script>
</body>
</html>
对Vue原型直接进行扩展
Vue.prototype.$axios = axios;
网友评论