简单了解Vue组件以及组件通信

组件

组件实际上就是自定义元素，是高级自定义的html代码元素，是可复用的Vue实例
既然也算是实例，那组件内部也可以有data,computed,watch等，不一样的是el是根实例特有的，还有组件中的data必须是一个函数，这样才能实现组件的复用性，每个组件才能是独立的。

创建组件

组件最主要的部分就是data还有template模板，
data必须是一个函数，上方阐述过
template是模板，是你要放在组件里的内容
在下面代码中，我们创建了一个叫myCom的组件

let myCom = {
      data() {
        return {
          comMsg: "组件数据"
        }
      },
      // 模板
      template: `
        <div>
          <span>{{comMsg}}</span>  
          <span>{{comMsg}}</span>
          <button @click="comMsg='新数据'">更改数据模型中的数据</button>
        </div>
      `
    };

注册组件

声明一个组件完毕后我们需要声明一下组件，这样才能使用
注册组件又有全局注册和局部注册，概念和函数类似，全局声明，那么全局任何地方都能使用该组件，如果是局部声明，那只能在局部使用该组件，外部不能使用。
全局注册虽然方便，但是十分的占资源，所以在大的项目中建议局部注册，哪里使用到哪里就局部注册

全局注册组件

Vue.component('my-com', myCom);

局部注册组件
在b组件内注册了a组件

let myComB = {
      // 局部注册A组件
      components: {
        "my-com-a": myComA
      },
      template: `
        <div>B组件
          <my-com-a></my-com-a>  
        </div>
      `
    }

使用组件

上方声明并注册了myCom组件，那么我们可以像使用html标签一项使用该组件
下方使用了三个myCom组件，它们内部虽然都一样，但都是相互独立的

<div id="app">
    <my-com></my-com>
    <my-com></my-com>
    <my-com></my-com>
  </div>

组件通信 父子之间传值

因为组件是可以嵌套的，那么就会有父给子传数据还有子给父传数据两种情况

• 父组件通过prop给子组件传递数据

父组件可以将数据作为自定义属性一样将数据传递到props中

<my-com title="" :msg="msg" attr-a=""></my-com>

props写在子组件内，注册一下父亲要传的数据

	{
      props:['title','msg','attrA'],
      template:`
		<div>
          <span>子组件内部数据：{{comMsg}}</span>  
          <br/>
          <span>父组件数据：{{title}}--{{staticAttr}}</span>
          <button @click="comMsg='新数据'">更改数据模型中的数据</button>
          <button @click="toEmit">发射数据</button>
        </div>
			`
    }

这样，子组件在接收到父组件传到props里的数据以后就可以在模板里使用了

• 子组件给父组件传递数据

子组件给父组件传数据要写一个自定义事件，将数据发射给父元素

第一步，我们先写一个事件按钮在子组件的模板内，绑定toEmit事件

// 模板
      template: `
        <div>
          <button @click="comMsg='新数据'">更改数据模型中的数据</button>
          <button @click="toEmit">发射数据</button>
        </div>
      `,

第二步，我们在子组件的methods中写toEmit函数，调用该函数是触发my-event事件处理程序，后面跟着的是要发送的参数

methods: {
        toEmit() {
          // 发射  参数：自定义事件名称，事件处理程序的实参(发射的数据)
          this.$emit('my-event', this.comMsg, 100);
        }
      }

第三步，在my-com标签中绑定my-event事件处理程序，来调用父组件的myEventHandle函数

<div id="app">
    {{msg}}
    <my-com @my-event="myEventHandle" :title="msg" static-attr="父组件给子组件的静态数据"></my-com>
  </div>

第四步，在父组件（这里的额父组件就是vue实例）的methods中写myEventHandle函数

methods: {
        // my-event的事件处理程序
        myEventHandle(a, b) {
          console.log(a, b, '----');
        }
      }

点击button，让子组件给父组件发射数据，父组件在使用方法使用该数据。
总结：父传子是通过属性传值，子传父是通过事件传值