VueJS（七）

最新推荐文章于 2022-04-15 13:18:42 发布

mwwb

最新推荐文章于 2022-04-15 13:18:42 发布

阅读量83

点赞数

分类专栏： VueJS 文章标签： vue

本文链接：https://blog.csdn.net/qq_43278421/article/details/107076457

版权

VueJS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

今天继续学习组件通信

昨天学到父组件在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件

<body>
		<div id="app">
			<p>总数：{{total}}</p>
			<my-component
			   @increase="handleGetTotal"   
			   @reduce="handleGetTotal"></my-component>
		</div>
		<script>
			Vue.component('my-component',{
				template:'\
				<div>\
				   <button @click="handleIncrease">+1</button>\
				   <button @click="handleReduce">-1</button>\
				</div>',
				data:function(){
					return {
						counter:0
					}
				},
				methods:{
					handleIncrease:function(){
						this.counter++;
						this.$emit('increase',this.counter);
					},
					handleReduce:function(){
						this.counter--;
						this.$emit('reduce',this.counter);
					},
				}
				
			});
			var app =new Vue({
				el:'#app',
				data:{
					total:0
				},
				methods:{
					handleGetTotal:function(total){
						this.total = total;
					},
				}
			})
		</script>
	</body>

子组件一共两个按钮，分别实现加一减一的功能，在改变组件data中的counter后，通过$emit()再把它传递给父组件，父组件使用两个v-on绑定（v-on:可以简写成@）,$emit()的第一个参数是自定义事件的名字，后面的都是需要传递的参数，可以多写或者不写。
这个就是子组件向父组件传递数据的过程！！！

v-on在珠江上除了有监听自定义事件的功能外，还可以监听DOM时间，用上.native的修饰符表示监听的是一个原生事件（？？？不知道）

<my-qian v-on:click.native="handleClick"></my-qian>

使用v-model
自定义组件上可以使用v-model指令

		<script>
			Vue.component('my-component',{
				template:'<button @click="handleClick">+1</button>',
				data:function(){
					return{
						counter:0
					}
				},
				methods:{
					handleClick:function(){
						this.counter++;
						this.$emit('input',this.counter);
					}
				}
			});
			var app = new Vue({
				el:'#app',
				data:{
					total:0
				}
			})
		</script>
	</body>

就标签本来是通过绑定函数，函数再传值，使用v-model的时候就是直接绑定了数据

v-model还可以用来创建自定义的表单输入组件

<body>
		<div id="app">
			<p>{{total}}</p>
			<my-component v-model="total"></my-component>
			<button @click = "handleReduce">-1</button>
		</div>
		<script>
			Vue.component('my-component',{
				props:['value'],
				template:'<input :value="value" @input="updateValue">',
				methods:{
					updateValue:function(event){
						this.$emit('input',event.target.value);
					}
				}
			});
			var app = new Vue({
				el:'#app',
				data:{
					total:0
				},
				methods:{
					handleReduce:function(){
						this.total--;
					}
				}
			})
		</script>
	</body>

非父子组件通信
一般指的是兄弟组件和跨多级组件

vue它所使用的方式是找一个空的vue实例作为中央事件总线
也就是所谓的中介

	<body>
		<div id="app">
			{{message}}
			<component-a></component-a>
		</div>
		<script>
			var bus = new Vue();
			
			Vue.component('component-a',{
				template:'<button @click="handleEvent">传递时间</button>',
				methods:{
					handleEvent:function(){
						bus.$emit('on-message','来自组件component-a的内容');
					}
				}
			});
			
			var app = new Vue({
				el:'#app',
				data:{
					message:''
				},
				mounted:function(){
					var _this = this;
					bus.$on('on-message',function(msg){
						_this.message = msg;
					});
				}
			})
		</script>
	</body>

首先，他这里是创建了一个空的vue实例，bus，定义了一个组件comonent-a，还有一个vue实例app
在实例app注册的内容中监听了来自bus的一个事件on-message，在组件中点击按钮会通过bus把事件on-message发出去，此时app就会收到来自bus的事件

简单概括流程就是这个组件是注册了一个按钮，按钮点击的函数handleEvent内容是bus，然后注册的实例app是在监听这个bus的事件的，一旦点击将函数的参数赋值给message，这样一来就做到了组件和一个vue实例之间的数据通信，实质上他们是通过bus交流的，bus获得了组件的数据，vue实例又通过bus获得数据，属实绕

除了使用中央事件总线bus这个手段外，还有两种方法：

父链
在子组件中，使用this.$parent可以直接访问该组件的父实例或组件，父组件也可以使用this.$children来访问他所有的子组件，而且可以递归向上或向下无限访问，直至根实例或最内层的组件

<body>
		<div id="app">
			{{message}}
			<component-a></component-a>
		</div>
		<script>
			Vue.component('component-a',{
				template:'<button @click="handleEvent">通过父链直接修改数据</button>',
				methods:{
					handleEvent:function(){
						this.$parent.message='xxxxxxxxxx';
					}
				}
			});
			var app = new Vue({
				el:'#app',
				data:{
					message:''
				}
			})
		</script>
	</body>

就直接访问父的数据，但是书上说这样容易提高耦合度，应该避免
推荐使用props和$emit来通信

然后是子组件索引

	<body>
		<div id="app">
			<button @click="handleRef">通过ref获取子组件实例</button>
			<component-a ref="comA"></component-a>
		</div>
		<script>
			Vue.component('component-a',{
				template:'<div>子组件</div>',
				data:function(){
					return {
						message:'子组件内容'
					}
				}
			});
			var app =new Vue({
				el:'#app',
				methods:{
					handleRef:function(){
						var msg = this.$refs.comA.message;
						console.log(msg);
					}
				}
			})
		</script>
	</body>

就是通过一个索引一样的形式，

var msg = this.$refs.comA.message;

获得组件中message的数据值

使用slot分发内容
混合使用父组件内容和子组件模板的时候，会使用到slot

props传递数据、events触发事件、slot内容分发构成了Vue组件的3个API来源

作用域的概念
编译的作用域

<child-component>
     {{message}}
</child-component>

这里的message就是一个shot？，他绑定的是父组件的数据而不是组件<child-component>的数据
父组件模板的内容实在父组件的作用域内编译，子组件模板的内容实在子组件作用域内编译？
这好像说的废话

<body>
		<div id="app">
			<my-qian v-show="showqian"></my-qian>
		</div>
		<script>
			Vue.component('my-qian',{
				template:'<div>子组件</div>'
			});
			var app = new Vue({
				el:'#app',
				data:{
					showqian:true
				}
			})
		</script>
	</body>