Vue组件
Vue组件是可复用的Vue实例,因此其接受与 new Vue
相同的选项,如 data、computed、watch、methods
以及生命周期钩子等,只用像 el
这中根实例特有的选项,其不可使用。
Vue.Component('Link', {
data(){
return {
href: 'https://vuex.vuejs.org/zh-cn/'
};
},
template: '<a v-bind:href="href">Vuex</a>'
})
// 组件使用
<Link></Link>
Tips
data必须是一个函数,每个组件实例都可以维护一份被返回对象的独立拷贝。
data(){
return {
href: 'https://vuex.vuejs.org/zh-cn/'
};
}
Vue组件注册
- 全局注册
通过Vue.Component(componentName,options)
进行全局组件注册
Vue.Component('button-count',{
...options
})
- 局部注册
通过components
选项进行组件局部注册
import ButtonCount from 'ButtonCount';
new Vue({
components: {
ButtonCount
}
})
Vue组件数据传递
- 通过
prop
向子组件传递数据
所有的prop都是父子组件之间形成一个单行向下的数据传递,即父组件的prop更新会向子组件传递,反之不行。
// parent
<template>
<span :class="classes">
<Icon :type="person" :size="20" :color="#ddd"></Icon>
</span>
</template>
<script>
export default {
name: 'Avater',
props: {
type: {
type: String,
default: 'circle'
}
},
computed: {
classes() {
return `${this.type}`
}
}
}
</script>
// child
<template>
<i :class="classes" :style="styles"></i>
</template>
<script>
export default {
name: 'Icon',
props: {
type: String,
size: [Number,String],
color: String
},
computed: {
classes(){
return `${this.type}`
},
styles(){
const style = {};
if(this.color){
style['color'] = this.color;
}
if(this.size){
style['font-size'] = (typeof this.size === 'number') ? `${this.size}px` : `${this.size}`;
}
}
}
}
</script>
- 通过
slot
向子组件传递数据
通过元素实现内容分发
// parent
<template>
<Layout>
<section slot="header">this layout header</section>
<section slot="main">this layout main</section>
<section slot="footer">this layout footer</section>
</Layout>
</template>
<script>
export default {
name: 'ParentLayout'
}
</script>
// child
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot name="main"></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script>
export default {
name: 'Layout'
}
</script>
- 通过自定义事件向父组件传递数据
触发的事件名需要完全匹配监听这个事件所用的名称
// parent
<template>
<BaseButton @click="handClick">click me</BaseButton>
</template>
<script>
export default {
name: 'ParentButton',
methods: {
handClick(event){
console.log(event);
}
}
}
</script>
// child
<template>
<button @click="handClick"></button>
</template>
<script>
export default {
name: 'BaseButton',
methods: {
handClick(){
this.$emit('click',event);
}
}
}
</script>
- 通过
event bus
实现非父子组件通信
使用一个空的 Vue 实例作为中央事件总线
在这两个组件之间引入这个中央事件总线,然后emit,on相应的事件
// Bus
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('selected', value)
// 在组件 B 创建的钩子中监听事件
bus.$on('selected', function (val) {
// ...
})
- 通过
vuex
实现组件数据共享
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。