Vue组件(compoent)

自定义组件有两种方式1.全局组件，2.局部组件

全局组件：我们可以这样理解，一个vue组件就是一个vue实例

组件（compoent）的模板（template）：根元素必须只有一个

模板：之前所学的插值表达式，绑定属性，绑定事件，循环列表的方法，在template里面都可以使用

书写模板字符串

1、最原始的方法是写字符串

image

2、借助es6的语法

image

3、使用scrpt标签写

[图片上传失败...(image-53b6e9-1531549126306)]

4、直接在html写

[图片上传失败...(image-6449c7-1531549126306)]

组件里面的data必须是函数

image

• 组件的通讯

• 1、父组件向子组件通讯(单项数据流的传递,子组件不应该改变父组件的值)

•      a.在调用子组件的标签上声明自定义属性，该属性的值为父组件要向子组件通讯的内容，
  

•      b.子组件通过props属性声明a步骤中的自定义属性为子组件的数据(变量)
  

• 2、子组件向父组件通讯

•      a.子组件通过$emit('eventName','toDeliverData')发送一个自定事件(第一个参数为事件名，
  

•      第二个参数为要传递的数据)
  

•      b.父组件通过v-on:eventName,监听子组件发送的自定义事件，从事件对象里面剥离出子组件传递的值。
  

• 3、子组件的通讯

•      a.声明一个中央集线器 var busHub = new Vue();
  

•      b.利用bushHub的$emit方法发送一个自定义事件，方法同上
  

•      c.其中一个子组件利用busHub的$on方法监听上步骤中的自定义事件，进而拿到传递的数据
  

•      注意！事件的监听一定要早于事件的发送，否则可能监听不到事件的触发
  

以下具体示例

父向子传值

首先我们可以删除掉模板项目中src/components/Hello.vue和src/components/About.vue,然后在App.vue中删除对于Hello和About子组件的注册和使用还有一些其他无关紧要的东西，此时的App.vue应为这样

[图片上传失败...(image-d88d53-1531549126306)]

1.创建子组件，在src/components/文件夹下新建一个Child.vue

2.Child.vue的中创建props，然后创建一个名为message的属性

image

3.在App.vue中注册Child组件，并在template中加child标签，标签中添加message属性并赋值

image

4.保存修改的文件，查看浏览器

image

5.我们依然可以对message的值进行v-bind动态绑定

image

此时浏览器中

image

父组件向子组件传值成功

子组件在props中创建一个属性，用以接收父组件传过来的值

父组件中注册子组件

在子组件标签中添加子组件props中创建的属性

把需要传给子组件的值赋给该属性

子组件向父组件传值

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

image

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

image

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

image

4.保存修改的文件，在浏览器中点击按钮

image

子组件向父组件传值成功

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件

将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了