介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt; title> & lt;/title>
& lt;脚本src=癶ttps://cdn.jsdelivr.net/npm/vue/dist/vue.js"祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
根实例的数据信息:{{消息}}
& lt; br>
根实例的数据名称:{{名称}}
& lt; br>
信息:
& lt; component-demo1
v:编辑=皌riggerEdit(& # 39;消息# 39;,事件美元)“;
祝辞& lt;/component-demo1>
名称:
& lt; component-demo1
v:编辑=皌riggerEdit(& # 39;名字# 39;,事件美元)“;
祝辞& lt;/component-demo1>
& lt;/div>
& lt;/body>
& lt; script>
Vue.component (& # 39; component-demo1& # 39;, {
模板:
& lt; div>
组件内的输入:
& lt;输入
v:输入=& # 39;triggerInput& # 39;
比;
& lt;/div>
”,
方法:{
triggerInput:函数(e) {
美元。排放(& # 39;编辑# 39;,e.target.value)
},
},
})
应用var=new Vue ({
艾尔:& # 39;#应用# 39;
数据:{
信息:& # 39;你好vue # 39;
名称:& # 39;配伍# 39;
},
方法:{
triggerEdit:函数(关键字,值){
(例子)=价值
console.log(事件)
}
}
})
& lt;/script>
& lt;/html>
这篇文章主要介绍Vue组件如何修改根实例的数据,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
思路:
1在组件内部监听事件并把事件发出
2在组件上监听排放出来的事件
3当事件发生时执行对应的函数去修改根实例上的数据
实现:
1在组件内部的输入框中监听输入事件,并给输入事件绑定,,
, triggerInput函数
2当往输入框中输入内容时,触发triggerInput函数
, triggerInput函数向外部发出一个编辑事件和输入框的值
3在组件上监听这个编辑事件并给编辑事件绑定triggerEdit函数
4此时会触发triggerEdit函数,triggerEdit函数就能去修改根实例上的数据
注意:
1 triggerEdit函数的第一个参数为你想要修改的根实例数据的键
2第二个参数美元的事件是套路,有这个参数才能在triggerEdit函数中获取
,组件内部释放出来的输入框的值
3可以在triggerEdit函数中日志出组件内部发生的事件
以上是Vue组件如何修改根实例的数据的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
