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

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实例内使用

<div id="app">
    <com-a></com-a>
    <com-b></com-b>
</div>

方式一：在实例内部定义

		<script type="text/javascript">
			new Vue({
				el:"#app",
				components:{
					'ComA':{
						template:"<div>{{word}}</div>",
						data:function(){
							return{
								word:"this is A Compotent"
							}
						}
					},
					'ComB':{
						template:"<div>{{word}}</div>",
						data:function(){
							return{
								word:"this is B Compotent"
							}
						}
					},
				}
			})
		</script>

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

		<script type="text/javascript">
			var ComA ={
							template:"<div>{{word}}</div>",
							data:function(){
								return{
									word:"this is A Compotent"
								}
							}
						};
			var ComB = {
				template:"<div>{{word}}</div>",
				data:function(){
					return{
						word:"this is B Compotent"
					}
				}
			};
			new Vue({
				el:"#app",
				components:{
                    //—kabak命名必须带'',pascal命名法可不带引号
					'com—a':ComA,
					 ComB:ComB
				}
			})
		</script>

ES6简写：

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

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

效果：

this is A Compotent

this is B Compotent

组件通信

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

常见类型：

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

父组件向子组件传值

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

三种传值方式：

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

		<div id="app">
			<!--直接赋值—— props里的title直接赋值-->
			<com-a my-title = "直接赋值的标题"></com-a>
			<!--匿名值变量—— 相当于将值为'这是静态标题'的匿名变量赋值给props里的title -->
			<com-a v-bind:my-title="'这是静态标题'"></com-a>
			<!-- 将父实例数据title、content这两个变量赋值给props里的title、words -->
			<com-a :my-title="title" :words="content"></com-a>
		</div>

    	<script type="text/javascript">
		Vue.component('ComA',{
                        props:['myTitle','words'],
						template:`<div>
						<h3>{{title}}</h3>
						<p>{{words}}</p>
						</div>`
					});
			new Vue({
				el:"#app",
				data:{
					title:"全局标题",
					content:"全局内容"
				}
			})
		</script>

v-for在传值中的应用

		<div id="app">
			<com-a v-for="item in items" :key="item.title"
			:item-title="item.title"
			:item-words="item.content"
			:item="item"
			></com-a>
		</div>

			<script type="text/javascript">
			Vue.component('ComA',{
							props:['itemTitle','itemWords','item'],
							template:`<div>
							<h3>{{itemTitle}}</h3>
							<p>{{item.content}}</p>
							</div>`
						});
				new Vue({
					el:"#app",
					data:{
						items:[
							{
								title:"全局标题1",
								content:"全局内容1"
							},
							{
								title:"全局标题2",
								content:"全局内容2"
							},
							{
								title:"全局标题3",
								content:"全局内容3"
							}
						]

					}
				})
			</script>

子组件向父组件传值

自定义触发事件

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

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

具体步骤：

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

		<div id="app">
			<!-- 2、在自定义组件里声明这个事件对应的函数或者表达式 -->
			<com-a v-for="item in items" :key="item.id"
			:item-title="item.title"
			@count-change="TotalCount++"
			></com-a>
          <span>TotalCount:{{TotalCount}}</span>
		</div>

			<script type="text/javascript">
			Vue.component('ComA',{
							props:['itemTitle','itemWords','item'],
							template:`<div>
							<div >
								<span>{{itemTitle}}</span>
								<span>{{count}}</span>
								<button type="button" @click="countIns">+1</button>
							</div>
							</div>`,
							data(){
								return {
									count:0
								}
							},
							methods:{
								'countIns':function(){
									//1、通过emit自定义一个事件count-change
									this.$emit('count-change');
									this.count++;
								}
							}
						});
				new Vue({
					el:"#app",
					data:{
						items:[
							{
								title:"苹果",
								id:"1"
							},
							{
								title:"香蕉",
								id:"2"
							},
							{
								title:"芒果",
								id:"3"
							}
						],
						TotalCount:0

					},
					methods:{
						totalchange:function(){

							this.TotalCount++;
						}
					}
				})
			</script>

效果：

$emit详解

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

• 定义：

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

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

  <com-a v-for="item in items" :key="item.id"
  			:item-title="item.title"
  			@count-change="TotalCount++"
  			></com-a>
  

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

• 定义：

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

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

  			<com-a v-for="item in items" :key="item.id"
  			:item-title="item.title"
  			@count-change="totalchange($event)"
  			></com-a>
  

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

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

效果：

非父子组件传值

分类

• 兄弟组件

• 完全无关的组件

兄弟组件传值

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

思路n....

如下图思路：

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

<div id="app">
			<com-a @count-change="value=$event"></com-a>
			<com-b :val="value"></com-b>
		</div>

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

完整代码：

		<div id="app">
			<com-a @title-change="value=$event"></com-a>
			<com-b :val="value"></com-b>
		</div>

    <script type="text/javascript">
        Vue.component('ComA',{
        template:`<div>
                <h3>这是组件A的标题:{{title}}</h3>
                <button type="button" @click="countIns">传值</button>
                </div>`,
        data(){
            return {
                title:"生日快乐"
            }
        },
        methods:{
            countIns(){
                this.$emit('title-change',this.title);
            }
        }
    });
    Vue.component('ComB',{
        props:['val'],
        template:`<div>
                <h3>这是组件B的标题:{{val}}</h3>
                </div>`
    });			

    new Vue({
        el:"#app",
        data:{
            value:""
        }
    })
    </script>

效果：

完全无关组件传值（EventBus）

定义

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

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

形式

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

步骤

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

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

2. 在html里引入EventBus.js

   	<head>
   		<meta charset="utf-8">
   		<title></title>
   		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
   		<!-- 1、引入定义的eventbus -->
   		<script src="EventBus.js" type="text/javascript" charset="utf-8"></script>
   	</head>
   

3. 组件里触发和注册

   		<div id="app">
   			<com-a :my-title="title"></com-a>
   			<com-b></com-b>
   		</div>
   

   		<script type="text/javascript">
   		// 传递组件A
   			Vue.component('com-a',{
   				props:['myTitle'],
   				template:`<div>
   								<span>{{myTitle}}</span>
   								<span>{{count}}</span>
   								<button type="button" @click="countIns">+1</button>
   							</div>`,
   				data(){
   					return{
   						count:0
   					}
   				},
   				methods:{
   					countIns(){
   						//2、传递者——定义触发事件
   						bus.$emit('count-change',1);
   						this.count++;
   					}
   				}
   
   			});
   		//接收组件B
   			Vue.component('com-b',{
   
   				template:`<div>
   								<span>totalCount:{{totalCount}}</span>
   						</div>`,
   				data(){
   					return {
   						totalCount:0
   					}
   				},
   				created() {
   					//ES6的写法
   					// bus.$on('count-change',num=>{
   					// 	console.log(this.totalCount);
   					// 	this.totalCount += num;
   					// });
   					// 注意和上面ES6写法的区别，此处方法内的this是指的函数，不能通过this.totalCount取到值
   					var t =this;
   					//3、接收者——通过$on获取值
   					bus.$on('count-change',function(num){
   						console.log(this);
   						t.totalCount += num;
   					});
   				}
   			});
   			new Vue({
   				el:"#app",
   				data:{
   					title:"苹果",
   					id:1,
   					totalCount:0
   				}
   			});
   		</script>
   

   效果：