本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于Vue组件修改根实例的数据方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。思路:
1 在组件内部监听事件并把事件 emit
2 在组件上监听 emit 出来的事件
3 当事件发生时执行对应的函数去修改根实例上的 data
实现:
1 在组件内部的 input框 中监听 input事件,并给 input事件 绑定
triggerInput函数
2 当往 input框 中输入内容时,触发 triggerInput 函数
triggerInput函数 向外部 emit 一个 edit事件 和 输入框的值
3 在组件上监听这个 edit事件 并给 edit事件 绑定 triggerEdit函数
4 此时会触发 triggerEdit函数,triggerEdit函数 就能去修改根实例上的 data
注意:
1 triggerEdit函数 的第一个参数为你想要修改的根实例 data 的 key
2 第二个参数 $event 是套路,有这个参数才能在 triggerEdit函数 中获取
组件内部 emit 出来的 input框的值
3 可以在 triggerEdit函数中 log 出组件内部发生的 event
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title></title>
<script src= "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
</head>
<body>
<div id= "app" >
根实例的 data message:{{message}}
<br>
根实例的 data name:{{name}}
<br>
message:
<component-demo1
v-on:edit= "triggerEdit('message', $event)"
></component-demo1>
name:
<component-demo1
v-on:edit= "triggerEdit('name', $event)"
></component-demo1>
</div>
</body>
<script>
Vue.component( 'component-demo1' , {
template: `
<div>
组件内的 input:
<input
v-on:input= 'triggerInput'
>
</div>
`,
methods: {
triggerInput: function (e) {
this. $emit ( 'edit' , e.target.value)
},
},
})
var app = new Vue({
el: '#app' ,
data: {
message: 'hello vue' ,
name: 'gua' ,
},
methods: {
triggerEdit: function (key, value) {
this[key] = value
console.log(event)
}
}
})
</script>
</html>
|
【相关推荐:JavaScript视频教程】
以上就是Vue组件修改根实例的数据方法(附代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
了解javascript中的垃圾回收机制
js怎么替换html标签
如何理解javascript中的变量提升
javascript中怎么将字符串转为数组
javascript中defer是什么
js中函数表达式 vs 函数声明,聊聊它们的不同点
在html文档中嵌入javascript的四种方法
svg和css3实现环形渐变进度条的代码示例
在javascript中,nan是什么类型?
怎么使用javascript将对象转为字符串
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » Vue组件修改根实例的数据方法(附代码)