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

这篇文章距离上次修改已过238天，其中的内容可能已经有所变动。

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

全局注册

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

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

局部注册

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

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

使用模板标签

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

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

使用is属性

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

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

通过字符串模板

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

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

通过 <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>

使用单文件组件

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

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<style>
div {
  color: red;
}
</style>

组件的生命周期钩子

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

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

组件的数据

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

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

组件的props

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

export default {
  props: ['myProp']
}

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

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

组件的方法

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

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

评论已关闭

推荐阅读