vue 组件,以及组件的复用
有时候代码的某一模块可能会经常使用到,那么完全可以把这一模块抽取出来,封装为一个组件,哪里需要用到的时候只需把模块调用即可 。参考vue官方 https://cn.vuejs.org/v2/guide/components.html
这里用一段代码
<div id="components-demo"> //注意组件名称不能驼峰命名,否则不渲染,也不报错 <button v-on:click="count++">You clicked me {{ count }} times.</button> </div>
因为这个点击按钮button会经常被用到,所以在这里要把这个button模块给抽取出来,做为一个组件
组件抽取
例:// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
methods:{
.......
}
})
注意:组件是可复用的VUE实例,所以他接收和new Vue实例同样的选项,如data
、computed
、watch
、methods
以及生命周期钩子等。
复用组件
例:
<div id="components-demo"> <button-counter></button-counter> </div>
ok!完事儿