vue的学习之路（Vue中组件(component )

在Vue中，组件是可复用的实例，它们定义了一种特别的Vue实例，可以把组件看作自定义的HTML元素。

1. 全局注册

你可以像这样注册一个全局组件，这样你可以在任何其他组件内部使用这个组件：

Vue.component('my-component-name', {
  // ... 选项 ...
})

2. 局部注册

如果你想在单个组件中使用一个组件，你可以在那个组件的选项中注册：

export default {
  components: {
    'my-component-name': {
      // ... 选项 ...
    }
  }
}

3. 使用模板标签

你可以像这样使用你的组件：

<my-component-name></my-component-name>

4. 使用is属性

如果你想要在一个通用的元素标签中使用组件，你可以使用is属性：

<div is="my-component-name"></div>

5. 通过字符串模板

如果你有一个字符串模板，你可以这样使用组件：

Vue.component('my-component-name', {
  template: '<div>A custom component!</div>'
})

6. 通过 <script type="text/x-template">

你可以在HTML文件中定义模板，然后在Vue组件中注册和使用它：

<script type="text/x-template" id="my-component-template">
  <p>This is a component!</p>
</script>
 
<div id="app">
  <my-component></my-component>
</div>
 
<script>
  Vue.component('my-component', {
    template: '#my-component-template'
  })
 
  new Vue({
    el: '#app'
  })
</script>

7. 使用单文件组件

Vue单文件组件是一个.vue文件，它包含三个部分：模板、脚本和样式。

<template>
  <div>{{ message }}</div>
</template>
 
<script>
export default {
  data () {
    return {
      message: 'Hello World!'
    }
  }
}
</script>
 
<style>
div {
  color: red;
}
</style>

8. 组件的生命周期钩子

每个组件都有一个生命周期，它包含几个生命周期钩子，你可以在这些钩子中注册你想要的行为。例如，created钩子可以在组件创建后执行代码：

export default {
  created() {
    console.log('The component has been created!')
  }
}

9. 组件的数据

每个组件实例都有一个与之关联的数据对象。在组件的选项中，你可以通过data函数返回这个对象：

export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}

10. 组件的props

你可以通过props向子组件传递数据。在子组件中，你可以像这样声明props：

export default {
  props: ['myProp']
}

然后你可以像这样使用子组件：

<my-component-name :my-prop="value"></my-component-name>

11. 组件的方法

你可以在组件的选项中定义方法，然后在模板中使用它们：