Vue组件二——data选项、局部组件、组件通信

data选项

• data选项用于储存组件数据

与实例data差别

1. 必须存储在有返回值的函数当中
2. 数据设置在返回值对象里

1、方式一             
data:function(){
    return{
        title:"组件标题",
        content:"组件内容"
    }
}
2、ES6的简写方式
data(){
    return{
        title:"组件标题",
        content:"组件内容"
    }
}

作用：确保每个组件实例单独维护一份返回对象的独立拷贝，相互之间不受影响（因为函数内部是单独的作用域）

Props选项

props命名规则

示例：我想跳转
建议prop定义时命名采用camelCase（驼峰命名），父组件绑定时使用kebab—case(因为html的属性不区分大小写)

局部注册

• 局部注册组件只能作用在当前实例或组件中

挂载在id为app的实例中的组件ComA，ComB只能在app实例内使用

方式一：在实例内部定义

方式二：在实例外单独定义，实例内调用

ES6简写：

要求：组件定义的名称必须符合pascal命名规则

			new Vue({
				el:"#app",
				components:{
					ComA,
					ComB
				}
			})

效果：

this is A Compotent

this is B Compotent

组件通信

组件通信——组件间传递数据的操作

常见类型：

• 父组件向子组件传值
• 子组件向父组件传值
• 非父子组件传值
• 其他通信方式

父组件向子组件传值

1. 通过子组件的props选项参数接收父组件的传值
2. 传值的类型可以是是值类型，也可以是数组及对象

三种传值方式：

• 直接赋值
• 传匿名值变量
• 传父实例变量,随父组件数据值的变化而改变

v-for在传值中的应用

子组件向父组件传值

自定义触发事件

子组件向父组件传值需要自定义事件

1. 子组件数据变化时，通过$emit() 触发自定义事件
2. 自定义事件名称建议使用kebab-case

具体步骤：

1. 在子组件的方法里通过$emit() 自定义触发事件名称
2. 在子组件实例html上指定自定义触发事件名称对应的响应函数或表达式
3. 在父组件定义函数的具体内容（如果响应是表达式此步骤省略）

		

			
			
          TotalCount:{{TotalCount}}
		

效果：

$emit详解

1、无参数(参考上述例子)

• 定义：

  this.$emit('count-change');
  

  指定(此处指定的是表达式)：

2、带参数，通过$event去接收参数

• 定义：

  this.$emit('count-change',5);
  

• 指定(此处指定的是函数)：

• 在父组件定义对应的响应函数totalchange

  methods:{
  						// 3、在父组件定义触发事件对应的函数
  						totalchange:function(num){	
  							this.TotalCount+= num;
  						}
  					}
  

效果：

非父子组件传值

分类

• 兄弟组件

• 完全无关的组件

兄弟组件传值

思路1：通过父组件进行数据中转

思路n....

如下图思路：

1. 首先通过com-a传值给父组件data里的value接收
2. 将父组件的value传给com-b组件里props里的val接收

new Vue({
    el:"#app",
    data:{
        items:[
            value:""
        ]				
    }
})

完整代码：

效果：

完全无关组件传值（EventBus）

定义

EventBus(事件总线)，类似数据搬运工、邮递员的角色

• 一个独立的事件中心
• 用于管理不同组件间的传值操作。

形式

• 通过Vue实例来管理传值操作
• 通过注册事件、调用事件来实现数据传递
• 发送组件——触发bus事件，通过$emit去触发
  接收组件——给bus注册对应事件，通过$on去注册接收函数

步骤

1. 新建一个Eventbus.js,定义一个bus的实例

   // 定义eventBus实例
   var bus = new Vue();
   

2. 在html里引入EventBus.js

3. 组件里触发和注册

   效果：