Vue组件基础

组件是可复用的Vue实例，且带有一个名字。
组件是可复用的 Vue 实例, 我们可以把页面中在多个场景中重复使用的部分抽出为一个组件进行复用。组件大大提高了代码的复用率。

组件的注册

全局组件注册

可以通过调用Vue.component的方式来定义全局组件，它接收两个参数：1.组件名，2.组件属性对象。
命名：

  • 短横线：<my-component-name>
  • 驼峰式：<MyComponentName> 使用驼峰命名组件时，首字母最好以大写
    字母开头。
    属性对象：组件的属性对象即为Vue的实例对象属性。
    全局组件可以在任何其他组件内使用，所以当我们设计的组件需要在不同地方使用的时候，我们应当注册全局组件。
// 注册
// 驼峰命名
Vue.component('MyComponentName', {/* */})
// 短横线命名
Vue.component('my-component-name', {/* */})

// 使用
<my-component></my-component>
// 也可以使用自闭和的方式
<my-component />

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-component></my-component>
    <my-component /> 
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('myComponent', {
    template: '<div>Hello ！</div>'
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>

我们注册了一个全局组件 myComponent，并在 html 内使用两种方式引用了该组件。

局部组件注册

我们也可以在Vue实例选项中注册局部组件，这样组件只能在这个实例中使用。局部组件的注册利用Vue实例的components对象属性，以组件名作为key值，以属性对象作为value。由于局部组件只能在当前的Vue实例中使用，所以当我们设计的组件不需要在其他组件内复用时，可以设计为局部组件。

//注册
components: {
  'MyComponentName': {
    template: '<div>Hello ！</div>'
  }
}

// 使用
<my-component></my-component>
// 也可以使用自闭和的方式
<my-component />

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-component></my-component>
    <my-component /> 
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    components: {
    	'myComponent': {
        template: '<div>Hello ！</div>'
      }
    }
  })
</script>
</html>

组件中的属性参数

在之前章节我们学习了Vue实例，其实，所有的Vue组件也都是Vue的实例，他们也可以接收同样的属性参数，并且有相同的生命周期钩子。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-component></my-component>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  //注册了一个全局组件 myComponent，并定义了 data 数据、 methods 方法、created 生命周期函数。
  Vue.component('myComponent', {
    template: '<div><div>{{ count }}</div><button @click="add">添加次数</button></div>',
    data() {
      return {
        count: 10
      }
    },
    methods: {
      add() {
        this.count = this.count + 1;
      }
    },
    created() {
      console.log('组件myComponent：created')
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
      return {}
    }
  })
</script>
</html>
posted @ 2020-07-31 20:02  柒丶月  阅读(128)  评论(0)    收藏  举报