当前位置:   article > 正文

Vue官方文档学习-组件_vue组件库官方文档

vue组件库官方文档

组件基础

1.定义

  • 组件是可复用的Vue实例,与new Vue接收相同的选项,包括data、computed、watch、methods以及生命周期钩子。
  • el是根实例特有的选项.
  • 【注意】:data属性必须是一个函数,以让每个实例都可以独立维护一份被返回对象的独立的拷贝。否则,多次使用同一个组件,若某个实例改变了data中的属性值,会导致其余实例也被修改。
  • 举例
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  // 1.data为一个函数,各个按钮的count是互相独立的
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Vue.component('button-counter', {
  // 2.data为一个对象,点击第一个按钮,其余按钮的count也会随之变化
  data:  {
      count: 0
    },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
<!-- 3.多次使用同一个组件 -->
<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

2.组件的全局注册

  • 通过Vue.component进行全局注册;
  • 全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建 Vue 根实例,也包括其组件树中的所有子组件的模板中;
Vue.component('my-component-name', {
  // ... options ...
})
  • 1
  • 2
  • 3
  • 注册组件的名字
    (1) 使用kebab-case
    Vue.component('my-component-name', { /* ... */ })
    
    • 1
    <my-component-name></my-component-name>
    
    • 1

3.模块系统中注册

(1) 场景

在开发中,通常会创建一个components目录用于专门放置组件,在该目录下,通常将每个组件放置在其各自的文件夹中。若某个组件需要使用其他组件,通常使用import / require模块系统.

(2) 使用

// 导入组件
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
// 在模块系统中局部注册
export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

(3) 基础组件的自动化全局注册

某些组件是相对通用的,会被作为基础组件,在各个组件中被频繁使用,会导致很多组件里都会有一个包含基础组件的长列表:

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
<BaseInput
  v-model="searchText"
  @keydown.enter="search"
/>
<BaseButton @click="search">
  <BaseIcon name="search"/>
</BaseButton>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

因此,若使用了webpack(或在内部使用了webpack的Vue cli 3+),就可以考虑在应用入口文件(src/main.js)中全局导入基础组件(全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生):

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

// 参数:组件目录的相对路径,是否查询其子目录,匹配基础组件文件名的正则表达式
const requireComponent = require.context('./components',false,/Base[A-Z]\w+\.(vue|js)$/)

// 遍历components目录下的文件
requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)  // 获取组件配置
  // 先获取和目录深度无关的文件名,再获取组件的 PascalCase 命名
  const componentName = upperFirst(camelCase(fileName.split('/').pop().replace(/\.\w+$/, '')))
  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的,
    // 那么就会优先使用 `.default`,
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

4.通过Prop向子组件传递数据(父->子)

  • 使用场景:在当前组件中引入了某个组件,需要向该组件传递一些数据;父组件向子组件传值
  • Prop 是可以在组件上注册的一些自定义 attribute,当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个 property;
  • 在组件中使用props属性接受父组件传递的数据;
  • 一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop;、
  • 示例1:传递字符串等单一数值变量
// 1.注册子组件
Vue.component('blog-post', { 
  // 2.接收父组件参数
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
<!-- 3.在父组件中使用 -->
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
  • 1
  • 2
  • 3
  • 4
  • 示例2:传递对象
// 1.注册子组件
Vue.component('blog-post', {
  // 2.接收父组件参数
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
<!-- 3.在父组件中使用 -->
<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
></blog-post>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

5.监听子组件事件(子->父)

  • 使用场景:子组件向父组件传递值
  • 子组件通过调用$emit方法并传入事件名称来出发事件,父组件通过监听事件从而获取子组件传递的数据;
  • 举例:子组件中有一个放大字体的功能,用户点击后,希望让页面中所有元素的字体都被放大,因此需要把子组件中改变的字体大小传递回父组件;
// 1.子组件定义
Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>   
      //通过$emit向父组件提交事件
      <button v-on:click="$emit('enlarge-text',0.1)">Enlarge text</button>
      <div v-html="post.content"></div>
    </div>
  `
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
<!-- 2.父组件 -->
<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
  <!-- 通过v-on监听子组件提交的事件和数据 -->
    <blog-post
      v-for="post in posts" v-bind:key="post.id"
      v-bind:post="post" v-on:enlarge-text="onEnlargeText"
      v-on:enlarge-text="postFontSize += 0.1">
    </blog-post>
  </div>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  },
  methods: {
	  onEnlargeText: function (enlargeAmount) {
	    this.postFontSize += enlargeAmount
	  }
   }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

6.在组件上使用v-model

  • 自定义事件也可以用于创建支持 v-model 的自定义输入组件;
<input v-model="searchText">
<!-- 等价于 -->
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>
<!-- 用在组件上 -->
<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event">
</custom-input>
<!-- 等价于 -- >
<custom-input v-model="searchText"></custom-input>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 【重要】为了自定义组件的v-model正常工作,组件内的input必须满足:
  1. 将其 value attribute 绑定到一个名叫 value 的 prop 上;
  2. 在其 input 事件被触发时,将新的值通过自定义的 input 事件抛出;
Vue.component('custom-input', {
  props: ['value'],
  template: `<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)">`
})
  • 1
  • 2
  • 3
  • 4

7.动态组件

(1)基础知识
  • 作用:用于在不同组件之间进行动态切换
  • 使用:在组件上加入is属性;
  • 绑定的is属性可以包括已注册组件的名字一个组件的选项对象;
  • 【注意】当is用于常规HTML元素,这些元素将被视为组件,所有的属性都会作为DOM attribute被绑定。对于像 value 这样的 property,若想让其如预期般工作,需要使用 .prop 修饰器
<component v-bind:is="currentTabComponent"></component>
  • 1
(2)用于解析DOM模板
  • 场景:有些 HTML 元素,诸如<ul>、<ol>、<table> 和<select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>、<tr> 和<option>,只能出现在其它某些特定的元素内部。这会导致我们使用这些有约束条件的元素时遇到一些问题,如:
<!-- 自定义组件 <blog-post-row> 会被作为无效的内容提升到外部,
    并导致最终渲染结果出错 -->
<table>
  <blog-post-row></blog-post-row>
</table>

<!-- 使用is -->
<table>
  <tr is="blog-post-row"></tr>
</table>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 使用以下方式使用模板,不存在该限制:
  1. 字符串 (例如:template: ‘…’)
  2. 单文件组件 (.vue)
  3. <script type=“text/x-template”>
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/807498
推荐阅读
相关标签
  

闽ICP备14008679号