Vue 组件基础知识总结

1. 什么是组件？

组件是 Vue.js 最核心的概念之一，它是将整个页面划分为一个个独立的、可复用的模块，每个模块都有自己的状态、行为以及样式。

组件能够使得我们的代码更加模块化，具备高可复用性，提高代码的可维护性，以及对页面进行灵活组合。

2. 组件定义方法

在 Vue 中，组件采用 “Vue.extend” 或者“Vue.component” 的方法进行定义。下面是两个组件定义示例：

Vue.extend

<template>
  <div>
    <h1>Vue Extend</h1>
    <p>{{message}}</p>
  </div>
</template>

<script>
  Vue.component('my-component', Vue.extend({
    data: function () {
      return {
        message: 'Hello Vue!'
      }
    }
  }))
</script>

使用 Vue.extend 方法创建组件，需要传入一个对象，该对象包括组件的配置项。这里使用了 data 属性，它返回一个包含当前组件所需数据的对象。

Vue.component

<template>
  <div>
    <h1>Vue Component</h1>
    <p>{{message}}</p>
  </div>
</template>

<script>
  Vue.component('my-component', {
    data: function () {
      return {
        message: 'Hello Vue!'
      }
    }
  })
</script>

使用 Vue.component 方法创建组件，同样需要传入一个对象，该对象包括组件的配置项。

3. 组件的传值

父子组件传值

组件之间的传值分为父组件向子组件传值和子组件向父组件传值。

父组件向子组件传值，需要将数据写入到子组件的 props 对象中。示例代码如下：

// 父组件
<template>
  <div>
    <h1>父组件</h1>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    data: function () {
      return {
        message: 'Hello from parent'
      }
    }
  }
</script>

// 子组件
<template>
  <div>
    <h2>子组件</h2>
    <p>{{message}}</p>
  </div>
</template>

<script>
  export default {
    props: ['message']
  }
</script>

父组件中使用 v-bind 绑定数据到子组件的 message 属性中，子组件定义 props 对象获取该属性即可。

子父组件传值

子组件向父组件传值则需要使用自定义事件，示例代码如下：

// 父组件
<template>
  <div>
    <h1>父组件</h1>
    <child-component @child-event="parentMethod"></child-component>
    <p>{{message}}</p>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    data: function () {
      return {
        message: ''
      }
    },
    methods: {
      parentMethod (data) {
        this.message = data
      }
    }
  }
</script>

// 子组件
<template>
  <div>
    <h2>子组件</h2>
    <button @click="sendData">Send Data</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendData () {
        this.$emit('child-event', 'Hello from child')
      }
    }
  }
</script>

在子组件中使用 $emit 方法触发事件，并传递数据，父组件通过 @child-event 事件监听方法获取数据。

4. 什么是全局组件和局部组件？

全局组件注册在 Vue 实例上，可以在任何组件中使用，而局部组件只能在父组件中使用。示例代码如下：

// 全局组件
Vue.component('my-component', {
  // 组件配置项
})

// 局部组件，只在父组件中使用
export default {
  components: {
    'my-component': {
      // 组件配置项
    }
  }
}

5. 总结

在 Vue 中，丰富的组件机制可以让我们更加灵活、高效地组织页面。掌握了组件的定义方法和传值方法，你将可以更加自如地构建出复杂的界面。