vue 兄弟组件间传数据 $on() $emit() $off() $once() 实例方法/事件

最新推荐文章于 2023-07-31 18:02:52 发布

昵称2-20个字符

最新推荐文章于 2023-07-31 18:02:52 发布

阅读量1.9k

点赞数 1

分类专栏： vue demo 文章标签： vue 实例方法/事件侦听

本文链接：https://blog.csdn.net/weixin_39517183/article/details/106842205

版权

demo 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

vue

12 篇文章 0 订阅

订阅专栏

vm.$on( event, callback )vue API

用法： 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"

vm.$once( event, callback ) vue API

用法： 监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

vm.$off( [event, callback] ) vue API

用法：

移除自定义事件监听器。
1. 如果没有提供参数，则移除所有的事件监听器；
2. 如果只提供了事件，则移除该事件所有的监听器；
3. 如果同时提供了事件与回调，则只移除这个回调的监听器。

vm.$emit( eventName, […args] ) vue API

用法： 触发当前实例上的事件。附加参数都会传给监听器回调。
示例：只配合一个事件名使用 $emit：

<div id="emit-example-simple">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
Vue.component('welcome-button', {
  template: `
    <button v-on:click="$emit('welcome')">
      Click me to be welcomed
    </button>
  `
})
new Vue({
  el: '#emit-example-simple',
  methods: {
    sayHi: function () {
      alert('Hi!')
    }
  }
})

配合额外的参数使用 $emit：

<div id="emit-example-argument">
					<!-- 添加事件侦听器  -->
  <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
</div>

Vue.component('magic-eight-ball', {
  data: function () {
    return {
      possibleAdvice: ['Yes', 'No', 'Maybe']
    }
  },
  methods: {
    giveAdvice: function () {
    	//根据数组长度 随机取数
      var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
      	//触发示例事件  从数组中随机取一元素传参
      this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
    }
  },
  template: `
    <button v-on:click="giveAdvice">
      Click me for advice
    </button>
  `
})

new Vue({
  el: '#emit-example-argument',
  methods: {
    showAdvice: function (advice) {
      alert(advice)
    }
  }
})

兄弟组件传数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>兄弟组件数据交互</title>
	</head>
	<body>
		<div id="app">
			<button @click='handle'>销毁事件</button>
			<aaa></aaa>
			<bbb></bbb>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 提供事件中心
			var hub=new Vue();
			
			// 组件  aaa
			Vue.component('aaa',{
				data:function(){
					return{
						content:'这里是a',
						txt:'我是a被给到兄弟的数据~~~',
						test:'这里的数据会变化的！！！'
					}
				},
				template:"<div>\
					<p>{{content}}</p>\
					<p>{{test}}</p>\
					<button @click='changes'>数据给b</button>\
				</div>",
				methods:{
					changes:function(){
						hub.$emit('aaaData',this.txt);
					}
				},
				mounted:function(){
					hub.$on('bbbData',(val)=>{
						this.test=val;
					});
				}
			});
			// 组件  bbb
			Vue.component('bbb',{
				data:function(){
					return{
						content:'这里是b',
						txt:'我是b给到a兄弟下的数据',
						test:'这里的数据会变化的！！！'
					}
				},
				template:"<div>\
					<p>{{content}}</p>\
					<p>{{test}}</p>\
					<button @click='changes'>数据给a</button>\
				</div>",
				methods:{
					changes(){
						hub.$emit('bbbData',this.txt);
					}
				},
				mounted() {
					hub.$on('aaaData',(val)=>{
						this.test=val;
					})
				}
			})
			// 实例化 Vue
			var vm = new Vue({
				el: "#app",
				data: {
					
				},
				methods: {
					//移除自定义事件监听器。
					handle(){
						hub.$off('aaaData');
						hub.$off('bbbData');
					}
				}
			});
		</script>
	</body>
</html>

昵称2-20个字符

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue 兄弟组件间传数据 $on() $emit() $off() $once() 实例方法/事件

vm.$on( event, callback )vue API用法：监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。vm.$on('test', function (msg) { console.log(msg)})vm.$emit('test', 'hi')// => "hi"vm.$once( event, callback ) vue API用法：监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被
复制链接

扫一扫