组件 (Component) 是 vue.js 最强大的功能之一.
组件可以扩展 html 元素, 封装可重用的代码.
vue.JS 引入的组件, 让分解单一 HTML 到独立组件成为可能. 组件可以自定义元素形式使用, 或者使用原生元素但是以 is 特性做扩展.
组件系统是 Vue.JS 其中一个重要的概念, 它提供了一种抽象, 让我们可以使用独立可复用的小组件来构建大型应用, 任意类型的应用界面都可以抽象为一个组件树:
一个页面的 ui 可以切割成由不同的组件构成, 这些组件毕竟独立, 这样拆分的好处在于可以做到如同堆积木般快速将页面搭建及重构.
使用组件的好处?
提高开发效率
方便重复使用
简化调试步骤
提升整个项目的可维护性
便于多人协同开发
注册和引用
使用组件之前, 首先需要注册. 可以注册为全局的或者是局部的. 全局注册可以使用:
Vue.component(tag, options)
注册一个组件. tag 为自定义元素的名字, options 同为创建组件的选项. 注册完成后, 即可以 < tag > 形式引用此组件. 如下是一个完整可运行的案例:
- <script src="https://unpkg.com/vue/dist/vue.js"></script>
- <div id="app">
- <tag></tag>
- </div>
- <script>
- Vue.component('tag', {
- template: `<div>one component rule all other<div>`
- })
- new Vue({
- el: "#app"
- });
- </script>
你也可以局部注册, 这样注册的组件, 仅仅限于执行注册的 Vue 实例内:
- <script src="https://unpkg.com/vue/dist/vue.js"></script>
- <div id="app">
- <tag></tag>
- </div>
- <script>
- var tag = {
- template: `<div>one component rule all other<div>`
- }
- new Vue({
- el: "#app",
- components: {tag}
- });
- </script>
我们注意到,<tag > 是 HTML 本身并不具备的标签, 现在由 Vue 的组件技术引入, 因此被称为是自定义标签. 这些自定义标签的背后实现常常是标签, 脚本, CSS 的集合体. 它的内部可以非常复杂, 但是对外则以大家习惯的简单的标签呈现. 通过本节这个小小案例, 组件技术带来的抽象价值已经展现出来一角了.
动态挂接
多个组件可以使用同一个挂载点, 然后动态地在它们之间切换. 元素 < component > 可以用于此场景, 修改属性 is 即可达成动态切换的效果:
<component v-bind:is="current"></component>
假设我们有三个组件 home,posts,archives, 我们可以设置一个定时器, 每隔 2 秒修改一次 current, 把三个组件的逐个切入到当前挂接点:
- <script src="https://unpkg.com/vue/dist/vue.js"></script>
- <div id="app">
- <component v-bind:is="current">
- </component>
- </div>
- <script>
- var App = new Vue({
- el: '#app',
- data: {
- current: 'archive',
- i :0,
- b : ['home','posts','archive']
- },
- components: {
- home: { template:'<h1>home</h1>'},
- posts: { template:'<h1>posts</h1>' },
- archive: {template:'<h1>archive</h1>'}
- },
- methods:{
- a(){
- this.i = this.i % 3
- this.current = this.b[this.i]
- this.i++
- setTimeout(this.a,2000)
- }
- },
- mounted(){
- setTimeout(this.a,2000)
- }
- })
- </script>
引用组件
一个父组件内常常有多个子组件, 有时候为了个别处理, 需要在父组件代码内引用子组件实例. Vue.JS 可以通过指令 v-ref 设置组件的标识符, 并在代码内通过 $refs + 标识符来引用特定组件. 接下来举例说明.
假设一个案例有三个按钮. 其中前两个按钮被点击时, 每次对自己的计数器累加 1; 另外一个按钮可以取得前两个按钮的计数器值, 并加总后设置 {{total}} 的值. 此时在第三个按钮的事件代码中, 就需要引用前两个按钮的实例. 代码如下:
- <script src="https://unpkg.com/vue/dist/vue.js"></script>
- <div id="app">
- {{ total }}
- <count ref="b1"></count>
- <count ref="b2"></count>
- <button v-on:click="value">value</button>
- </div>
- <script>
- Vue.component('count', {
- template: '<button v-on:click="inc">{{ count }}</button>',
- data: function () {
- return {count: 0}
- },
- methods: {
- inc: function () {
- this.count+= 1
- }
- },
- })
- new Vue({
- el: '#app',
- data: {total:0},
- methods: {
- value: function () {
- this.total = this.$refs.b1.count+this.$refs.b2.count
- }
- }
- })
- </script>
标签 button 使用 ref 设置两个按钮分为为 b1,b2, 随后在父组件代码内通过 $refs 引用它们.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/16700.html