跳至主要內容

Vue 的组件化

White...约 708 字大约 2 分钟

基本步骤

  1. 创建组件构造器
    调用Vue.extend()方法创建组件构造器,需要传入template:''
  2. 注册组件
    调用Vue.component()注册组件,需要传入组件标签,组件构造器
  3. 使用组件
    在 Vue 实例的作用范围内使用组件

全局组件和局部组件

  • 使用Vue.component()注册组件是全局的
  • 在 Vue 实例下使用components: {}注册的是局部组件

父组件和子组件

Vue.extend(),传入components: {}来注册子组件

语法糖

直接使用Vue.component(tagName, options)来注册全局组件,
在 Vue 实例中使用components: { tagName: options }来注册局部组件

抽离模板的写法

在 HTML 中,使用如下的方式声明模板

<!-- 方式一:使用script标签声明 -->
<script type="text/x-template" id="id">
<div>
  ...
</div>
</script>

<!-- 方式二:使用template标签声明 -->
<template id="id">
  <div>...</div>
</template>

<!-- 使用方式 -->
<script>
// 注册全局组件
Vue.component('tagName', {
  template: '#id',
});
</script>

组件如何访问数据和方法

<script>
Vue.component('tagName', {
  template: `
    <div>
      {{ data }}
      <button @click="btnClick"></button>
    </div>`,
  /*
   * 为什么data需要是一个函数而不是对象?
   * 保证使用组件时每个组件内的数据不会相互影响
   */
  data () {
    return {
      data: 'data'
    }
  },
  methods: {
    btnClick () { // ... }
  }
})
</script>

父子组件的通信方式

父子组件之间的数据是不能相互引用的,但一般在开发中会有这样的需求,官方给出的解决方案:

  • 通过props向子组件传递数据
  • 通过事件$emit向父组件发送消息

父传子:

<!-- 父组件模板 -->
<div id="app">
  <cpn :msg="message"></cpn>
</div>

<!-- 子组件模板 -->
<template id="id">
  <div>
    <button @click="btnClick"></button>
  </div>
</template>

<script>
// 子组件
const cpn = {
  template: '#id',
  // 1.数组
  props: ['msg'],
  // 2.类型限制
  props: {
    msg: String
  },
  // 3.默认值
  props: {
    msg: {
      // 类型时Object或者Array时,default需要是一个factory function
      type: String,
      default: 'msg',
      // 是否必传
      required: true
    }
  }
  data () { return {} }
}

// 父组件
const app = new Vue({
  el: '#app',
  data: {
    message: 'msg'
  }
  components: {
    cpn
  }
})
</script>

子传父:

<!-- 父组件模板 -->
<div id="app">
  <!-- 在父组件中通过v-on监听这个自定义事件 -->
  <cpn @btn-click="cpnClick"></cpn>
</div>

<!-- 子组件模板 -->
<template id="id">
  <div>
    <button v-for="item in books" @click="btnClick(item)">{{ item }}</button>
  </div>
</template>

<script>
// 子组件
const cpn = {
  template: '#id',
  data() {
    return {
      books: ['Java', 'C', 'C#'],
    };
  },
  methods: {
    btnClick(item) {
      // 发送自定义事件
      this.$emit('btn-click', item);
    },
  },
};

// 父组件
const app = new Vue({
  el: '#app',
  data: {},
  components: { cpn },
  methods: {
    cpnClick(item) {
      consloe.log(item);
    },
  },
});
</script>

父子组件的访问方式

有时候需要父组件直接访问子组件,或者子组件访问根组件

  • 父组件访问子组件: $children$refs。一般不使用$children,而是通过$refs访问,但是使用前需要给子组件添加ref属性使其添加到$refs
  • 子组件访问父组件:$parent。使用$root可以访问 Vue 实例
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8