Vue组件

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。
可见组件化在vue.js中的重要作用。组件可以扩展 HTML 元素，封装可重用的代码。

1.注册组件

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。

1.1全局注册

也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。

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

Vue.component 的参数:

1. 组件的名字，可以使用‘kebab-case’的方法（my-component-name），或是驼峰命名（MyComponentName），但调用的时候建议使用kebab-case方法（my-component-name）
2. 组件的具体细节，因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

实例

<div id="app">
    <!-- 调用组件,可以多次调用 -->
    <vue-demo></vue-demo>
    <vue-demo></vue-demo>
</div>
<script>
    //注册全局组件
    Vue.component('vue-demo',{
        data() {
            return {
                msg: 'vue-demo'
            }
        },
        template: '<div>这是组件：{
    {msg}}</div>'
    })

    //new Vue 创建的 Vue 根实例
    new Vue({
        el: '#app',
    })
</script>

1.2局部注册

我们通常使用webpack 构建vue系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。
我们定义component-a.vue

<template>
  <div>{
   {
   msg}}</div>
</template>

<script>
    export default {
      data() {
        return {
          msg: 'this is component A'
        };
      }
    };
</script>

<style scoped>
</style>

在B.vue中引用，别的可以在引用B

<template>
  <div>
    <component-a></component-a>
  </div>
</template>

<script>
import componentA from '../components/test';
export default {
  data() {
    return {
    };
  },
  components: {
    componentA: componentA
  }
};
</script>

<style  scoped>
</style>

可以看到

1. import componentA from ‘./components/component-a.vue’; 将组件引入
2. components： { } 将组件定义为 componentA
3. 定义componentA为组件名，通过 component-a 这样的驼峰使用组件

1.3 组件data 必须是一个函数

定义一个Vue实例

new Vue({
    el: '#app',
    data:{
       msg: '这是vue实例'
    }
})

组件

data: function () {
   
  return {
     msg: '这是vue组件'
  }
}

这样可以保证实例可以维护一份被返回对象的独立的拷贝。
我们使用vue-cli等配置webpack构建项目的时候，其实只有一个vue实例在main.js中定义，data使用的是对象的方式，而其他的vue页面其实都是组件，data使用的都是函数的方式

1.4 单个根元素

组件模板最终应该只有一个包含元素
template元素中只有(也必须有一个包裹元素，这里是div)

<template>
  <div>
    <p>{
   {
   msg}}</p>
    <p>{
   {
   num}}</p>
  </div>
</template>

错误示范：

<template>
   <p>{
   {
   msg}}</p>
   <p>{
   {
   num}}</p>
</template>

1.5使用子组件的注意事项

有些 HTML 元素，诸如ul、ol、table 和 select，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 li、tr和 option，只能出现在其它某些特定的元素内部。
这就使得如我们子组件是有div包裹的：

<table>
  <component-a></component-a>
</table>

将不会显示
我们应该采用下面的调用方式

<table>
  <tr is="blog-post-row"></tr>
</table>

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

• 字符串 (例如：template: ‘…’)
• 单文件组件 (.vue)
• script type=”text/x-template”

这就使得如我们采用的是类似vue-cli这样的配置webpack的架构，就可以不用考虑这个问题了。

2.父子组件之间通信

因为我们通常使用webpack配合局部定义组件的方式更多，所以这里的主要讲解webpack配合局部定义组件，全局的差不了太多

2.1 父组件向子组件通信

2.1.1 利用props定义需要传递的参数

子组件

<template>
  <div>
    <p>{
   {
   num}}</p>
  </div>
</template>

<script>
export default {
  props: ['num'],
  data() {
    return {
    };
  }
};
</script>

父组件

 <component-a num="this is num"></component-a>

结果：

可以看到显示了父组件传过来的 this is num 字符串

2.1.2 props大小写

子组件中定义参数使用驼峰，父组件传参使用kebab-case
子组件：

export default {
  props: ['compontMsg'],
};

父组件

<component<