Vue组件简单介绍

Vue组件

花开堪折直需折，莫待无花空折枝

• 注：组件化是Vue的一大特色，所以开始了解学习Vue组件化思想吧！
• 
  你是否也曾在角落发现了一朵“兰花”

组件使用步骤:

1. 组件实际就是一个Vue实列，所以拥有Vue对应的属性。

2. 使用Vue.extend()创建组件构造器

3. 使用Vue.component()注册组件

4. 在组件的对应范围内使用组件

全局组件与局部组件：

全局组件：

• 使用Vue.component()注册的组件

局部组件：

• 在Vue实列中使用"components"属性进行注册的组件

父组件与子组件:

1. 子组件完成构造
2. 在父组件的构造时，使用"components":在父组件内部注册子组件，并且可以在父组件内部使用子组件
3. 注册父组件

• 注：如果没有对子组件进行全局或者局部的注册，就不能直接使用子组件（在父组件只限于父组件范围使用）

• 注：子组件不能使用父组件的数据属性

• 案列：

组件的模板只有一个根元素：

• 即用一个元素包括其他元素

  正确：将span元素放入h1:

      <h1>
          我是父组件
          <span>啦啦啦</span>
      </h1>
  

  错误：h1与span元素是平级关系

  <template id="father">
      <h1>我是父组件</h1>
      <span>啦啦啦</span>
  </template>
  

注册组件的语法糖：

使用以下格式：组件的构造与注册同时进行

全局组件：

全局组件：
Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义 attribute。
  // 这个 prop 名为 todo。
  props: ['todo'],
//定义的模板
  template: '<li>{{ todo.text }}</li>'
})

局部组件：

components: {
    'cpn2': {
        template:
            `<div>
            <h2>我是标题2</h2>
            <p>我是内容, 呵呵呵</p>
        </div>`
    }
}

组件的data属性必须是函数：

组件的data属性：为一个函数且必须返回对象值（键值对）：

案列：

  Vue.component('cpn', {
    template: '#cpn',
    data() {
        //返回的是一个对象
      return {
        title: 'abc'
      }
    }
  })

注：组件的data需要在组建的模板中使用，不能再Vue实列中使用

组件模板的分离写法：

• Vue提供了两种方案来定义HTML模块内容：
  • 使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ppgn8nkR-1601539886959)(C:\Users\lydcp\AppData\Roaming\Typora\typora-user-images\image-20200723123955946.png)]

为什么组件的data必须是函数：

• 原因是在于Vue组件可以被复用，如果是一个属性的话，组件在多次使用后会相互影响；而在使用函数时，通过每次返回一个对象，不会互相影响。

Vue.component('cpn', {
    template: '#cpn',
     data() {
        //返回的是一个对象：counter:0
       return {
         counter: 0
       }
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  })

• 本人很菜，很多东西、知识点没写到位的，欢迎大家斧正。