vue中如何使用v模型完成组件间的通信 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍vue中如何使用v模型完成组件间的通信,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

vue的优点

vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。

在子组件中修改了值,父组件中立即更新。

vue中有一个很神奇的东西叫<代码> v模型>

使用<代码> v模型> v模型代码

父组件

& lt; template> 　　,& lt; div> 　　,{{fatherText}} 　　,& lt; Child v模型=癴atherText"祝辞& lt;/Child>//调用子组件,并将,fatherText传递给子组件　　,& lt; button @click=癱hangeChild"祝辞changeChildButton 　　,& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　import Child 得到“。/Child.vue"; 　　export default { 　　,名字:“father", 　　,数据(){ 　　,return { 　　,fatherText:“我# 39;m fathertext" 　　,}; 　　}, 　　,组件:{ 　　,孩子　　}, 　　,方法:{ 　　,changeChild (), {=,this.fatherText “father change 从而text"; 　　,} 　　,} 　　}; 　　& lt;/script>

子组件

& lt; template> 　　,& lt; div> 　　,& lt; p 类=癱hild", @click=癱hange"在{{fatherText}} & lt;/p>//正常使用fatherText的值,并添加一个修改值,的方法　　,& lt;/div> 　　& lt;/template> 　　& lt; script> 　　export default { 　　,名字:“child", 　　,模型:{//添加了模式方法,用于接收v模型传递的参数　　道具:大敌;“fatherText",,//父组件中变量的传递　　,事件:“changeChild",//事件传递　　}, 　　,道具:{ 　　,fatherText:{//正常使用道具接收fatherText的值　　,类型:字符串　　,} 　　}, 　　,数据(){ 　　,return { 　　, 　　,}; 　　}, 　　,方法:{ 　　,改变(){ 　　时间=this.fatherText 才能;& # 39;son change 从而文本# 39; 　　,} 　　,} 　　}; 　　& lt;/script>

在这里,报了一个错误,这是因为数据流是单向的,但是我们在这里,子组件不应该直接修改道具里的值。

vue中如何使用v模型完成组件间的通信”>,</p> <p>这里不能直接修改,所以我们需要迂回着修改,在子组件中定义一个自己的变量,再将道具的值赋值到自己的变量,修改自己的变量是可以的。</p> <h3>子组件——修改道具中的值</h3> <pre类= & lt; template> 　　,& lt; div> 　　,& lt; p 类=癱hild", @click=癱hange"在{{childText}} & lt;/p> 　　,& lt;/div> 　　& lt;/template> 　　& lt; script> 　　export default { 　　,名字:“child", 　　,模型:{ 　　道具:大敌;“fatherText",,//父组件中变量的传递　　,事件:“changeChild",//事件传递　　}, 　　,道具:{ 　　,fatherText: { 　　,类型:字符串　　,} 　　}, 　　,数据(){ 　　,return { 　　,childText: this.fatherText //定义自己的变量childText 　　,}; 　　}, 　　,方法:{ 　　,改变(){=,this.childText “son change 从而test";//修改自己的变量　　,} 　　,} 　　};

两个组件间更新

完成了上述代码,你会发现两个组件都改变的内容,但是只更新了自身组件的内容,如何使两个组件进行同步更新呢?

这里需要使用我的方是不是想找人法,来进行监听传递组件的变量

& lt; template> 　　,& lt; div> 　　,& lt; p 类=癱hild", @click=癱hangeChild"在{{childText}} & lt;/p> 　　,& lt;/div> 　　& lt;/template> 　　& lt; script> 　　export default { 　　,名字:“child", 　　,模型:{ 　　道具:大敌;“fatherText",,//父组件中变量的传递　　,事件:“changeChild",//事件传递　　}, 　　,道具:{ 　　,fatherText: { 　　,类型:字符串　　,} 　　}, 　　,数据(){ 　　,return { 　　,childText: this.fatherText 　　,}; 　　}, 　　,方法:{ 　　,changeChild (), {=,this.childText “son change 从而test"; 　　,} 　　}, 　　,看:{ 　　,fatherText (newtext),{//使用父组件中变量名为函数名,监听fatherText的变化,如果变化,则改变子组件中的值=,,this.childText newtext; 　　}, 　　,childText (newtext),{//监听子组件中childText变化,如果变化,则通知父组件,进行更新　　这。美元发出(“changeChild",, newtext); 　　,} 　　,} 　　};