vue中$emit与$on与.native的理解与使用

本文探讨了在Vue2.x中,如何通过`.native`修饰符实现父组件监听子组件的原生事件。示例中展示了父组件如何通过`update`自定义事件更新数据,并通过`<Child>`子组件触发`clickbutton`事件,从而实现数据交互。

父组件

<Parent @update="updatepage" :datab="pagedata"></Parent>
data(){
	return {
		pagedata=[{name:"丽丽",age:"12"}]
	}
},
methods:{
	updatepage(){
		console.log(1111)
	}
}

子组件

<Child>
	<div @click="clickbutton"></div>
</Child>
prop:['datab'],
method:{
	clickbutton(){
			this.$emit('update','梅梅')
	}
}

讲解.native:在vue2.4 ,这个作用是给父组件添加原生的事件用的。(因为在vue 2.x中组件只能接收子组件的自定义事件,那么父组件如何绑定触发自己的原生事件呢?就是通过.native实现的)

[Vue warn]: The .native modifier for v-on is only valid on components but it was used on <input>. found in ---> <ProductionSpecificationData> <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:619 _createElement @ vue.runtime.esm.js:3411 createElement @ vue.runtime.esm.js:3353 vm._c @ vue.runtime.esm.js:3491 render @ index.vue:32 Vue._render @ vue.runtime.esm.js:3548 updateComponent @ vue.runtime.esm.js:4066 get @ vue.runtime.esm.js:4479 run @ vue.runtime.esm.js:4554 flushSchedulerQueue @ vue.runtime.esm.js:4310 (anonymous) @ vue.runtime.esm.js:1980 flushCallbacks @ vue.runtime.esm.js:1906 Promise.then timerFunc @ vue.runtime.esm.js:1933 nextTick @ vue.runtime.esm.js:1990 queueWatcher @ vue.runtime.esm.js:4402 update @ vue.runtime.esm.js:4544 notify @ vue.runtime.esm.js:730 reactiveSetter @ vue.runtime.esm.js:1055 proxySetter @ vue.runtime.esm.js:4631 (anonymous) @ index.vue:1347 Promise.then handleUpdate @ index.vue:1346 click @ index.vue:828 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 invokeWithErrorHandling @ vue.runtime.esm.js:1854 Vue.$emit @ vue.runtime.esm.js:3888 handleClick @ element-ui.common.js:9441 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 original._wrapper @ vue.runtime.esm.js:6917 index.vue:78 [Vue warn]: The .native modifier for v-on is only valid on components but it was used on <input>. found in ---> <ProductionSpecificationData> <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:619 _createElement @ vue.runtime.esm.js:3411 createElement @ vue.runtime.esm.js:3353 vm._c @ vue.runtime.esm.js:3491 render @ index.vue:78 Vue._render @ vue.runtime.esm.js:3548 updateComponent @ vue.runtime.esm.js:4066 get @ vue.runtime.esm.js:4479 run @ vue.runtime.esm.js:4554 flushSchedulerQueue @ vue.runtime.esm.js:4310 (anonymous) @ vue.runtime.esm.js:1980 flushCallbacks @ vue.runtime.esm.js:1906 Promise.then timerFunc @ vue.runtime.esm.js:1933 nextTick @ vue.runtime.esm.js:1990 queueWatcher @ vue.runtime.esm.js:4402 update @ vue.runtime.esm.js:4544 notify @ vue.runtime.esm.js:730 reactiveSetter @ vue.runtime.esm.js:1055 proxySetter @ vue.runtime.esm.js:4631 (anonymous) @ index.vue:1347 Promise.then handleUpdate @ index.vue:1346 click @ index.vue:828 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 invokeWithErrorHandling @ vue.runtime.esm.js:1854 Vue.$emit @ vue.runtime.esm.js:3888 handleClick @ element-ui.common.js:9441 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 original._wrapper @ vue.runtime.esm.js:6917 index.vue:129 [Vue warn]: The .native modifier for v-on is only valid on components but it was used on <input>. found in ---> <ProductionSpecificationData> <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:619 _createElement @ vue.runtime.esm.js:3411 createElement @ vue.runtime.esm.js:3353 vm._c @ vue.runtime.esm.js:3491 render @ index.vue:129 Vue._render @ vue.runtime.esm.js:3548 updateComponent @ vue.runtime.esm.js:4066 get @ vue.runtime.esm.js:4479 run @ vue.runtime.esm.js:4554 flushSchedulerQueue @ vue.runtime.esm.js:4310 (anonymous) @ vue.runtime.esm.js:1980 flushCallbacks @ vue.runtime.esm.js:1906 Promise.then timerFunc @ vue.runtime.esm.js:1933 nextTick @ vue.runtime.esm.js:1990 queueWatcher @ vue.runtime.esm.js:4402 update @ vue.runtime.esm.js:4544 notify @ vue.runtime.esm.js:730 reactiveSetter @ vue.runtime.esm.js:1055 proxySetter @ vue.runtime.esm.js:4631 (anonymous) @ index.vue:1347 Promise.then handleUpdate @ index.vue:1346 click @ index.vue:828 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 invokeWithErrorHandling @ vue.runtime.esm.js:1854 Vue.$emit @ vue.runtime.esm.js:3888 handleClick @ element-ui.common.js:9441 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 original._wrapper @ vue.runtime.esm.js:6917 index.vue:183 [Vue warn]: The .native modifier for v-on is only valid on components but it was used on <input>. found in ---> <ProductionSpecificationData> <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:619 _createElement @ vue.runtime.esm.js:3411 createElement @ vue.runtime.esm.js:3353 vm._c @ vue.runtime.esm.js:3491 render @ index.vue:183 Vue._render @ vue.runtime.esm.js:3548 updateComponent @ vue.runtime.esm.js:4066 get @ vue.runtime.esm.js:4479 run @ vue.runtime.esm.js:4554 flushSchedulerQueue @ vue.runtime.esm.js:4310 (anonymous) @ vue.runtime.esm.js:1980 flushCallbacks @ vue.runtime.esm.js:1906 Promise.then timerFunc @ vue.runtime.esm.js:1933 nextTick @ vue.runtime.esm.js:1990 queueWatcher @ vue.runtime.esm.js:4402 update @ vue.runtime.esm.js:4544 notify @ vue.runtime.esm.js:730 reactiveSetter @ vue.runtime.esm.js:1055 proxySetter @ vue.runtime.esm.js:4631 (anonymous) @ index.vue:1347 Promise.then handleUpdate @ index.vue:1346 click @ index.vue:828 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 invokeWithErrorHandling @ vue.runtime.esm.js:1854 Vue.$emit @ vue.runtime.esm.js:3888 handleClick @ element-ui.common.js:9441 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 original._wrapper @ vue.runtime.esm.js:6917 index.vue:232 [Vue warn]: The .native modifier for v-on is only valid on components but it was used on <input>. found in ---> <ProductionSpecificationData> <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:619 _createElement @ vue.runtime.esm.js:3411 createElement @ vue.runtime.esm.js:3353 vm._c @ vue.runtime.esm.js:3491 render @ index.vue:232 Vue._render @ vue.runtime.esm.js:3548 updateComponent @ vue.runtime.esm.js:4066 get @ vue.runtime.esm.js:4479 run @ vue.runtime.esm.js:4554 flushSchedulerQueue @ vue.runtime.esm.js:4310 (anonymous) @ vue.runtime.esm.js:1980 flushCallbacks @ vue.runtime.esm.js:1906 Promise.then timerFunc @ vue.runtime.esm.js:1933 nextTick @ vue.runtime.esm.js:1990 queueWatcher @ vue.runtime.esm.js:4402 update @ vue.runtime.esm.js:4544 notify @ vue.runtime.esm.js:730 reactiveSetter @ vue.runtime.esm.js:1055 proxySetter @ vue.runtime.esm.js:4631 (anonymous) @ index.vue:1347 Promise.then handleUpdate @ index.vue:1346 click @ index.vue:828 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 invokeWithErrorHandling @ vue.runtime.esm.js:1854 Vue.$emit @ vue.runtime.esm.js:3888 handleClick @ element-ui.common.js:9441 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 original._wrapper @ vue.runtime.esm.js:6917 index.vue:278 [Vue warn]: The .native modifier for v-on is only valid on components but it was used on <input>. found in ---> <ProductionSpecificationData> <AppMain> at src/layout/components/AppMain.vue <Layout> at src/layout/index.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:619 _createElement @ vue.runtime.esm.js:3411 createElement @ vue.runtime.esm.js:3353 vm._c @ vue.runtime.esm.js:3491 render @ index.vue:278 Vue._render @ vue.runtime.esm.js:3548 updateComponent @ vue.runtime.esm.js:4066 get @ vue.runtime.esm.js:4479 run @ vue.runtime.esm.js:4554 flushSchedulerQueue @ vue.runtime.esm.js:4310 (anonymous) @ vue.runtime.esm.js:1980 flushCallbacks @ vue.runtime.esm.js:1906 Promise.then timerFunc @ vue.runtime.esm.js:1933 nextTick @ vue.runtime.esm.js:1990 queueWatcher @ vue.runtime.esm.js:4402 update @ vue.runtime.esm.js:4544 notify @ vue.runtime.esm.js:730 reactiveSetter @ vue.runtime.esm.js:1055 proxySetter @ vue.runtime.esm.js:4631 (anonymous) @ index.vue:1347 Promise.then handleUpdate @ index.vue:1346 click @ index.vue:828 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 invokeWithErrorHandling @ vue.runtime.esm.js:1854 Vue.$emit @ vue.runtime.esm.js:3888 handleClick @ element-ui.common.js:9441 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 original._wrapper @ vue.runtime.esm.js:6917 index.vue:1348 Uncaught (in promise) ReferenceError: data is not defined at index.vue:1348:1 (anonymous) @ index.vue:1348 Promise.then handleUpdate @ index.vue:1346 click @ index.vue:828 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 invokeWithErrorHandling @ vue.runtime.esm.js:1854 Vue.$emit @ vue.runtime.esm.js:3888 handleClick @ element-ui.common.js:9441 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 original._wrapper @ vue.runtime.esm.js:6917
最新发布
11-26
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值