vue组件双向数据绑定,vue两个组件相互调用
本文主要介绍了vue实现两个组件之间的数据共享和修改，具有很好的参考价值。希望对你有帮助。来和边肖一起看看吧。
在用vue开发的过程中，我们会遇到这样的情况。当我们将子组件引入父组件时，需要将父组件的值传递给子组件进行显示，子组件也可以改变父组件的值。
以我目前的一个项目的开发为例，如下页所示：
在父组件中，我引入了两个子组件，一个是左边的导航栏，另一个是中间的富文本编译器组件。当我点击左侧导航栏时，中间页面会切换，也就是改变引入的子组件。
如何实现？首先在这个页面的index.vue中设置一个变量index，左侧导航栏中的每一项也对应一个索引值。导航菜单绑定了select函数，@select=handleSelect ，@是v-on的简称。
HandleSelect函数接收参数，然后传输，再由父组件接收。
handleSelect(key，keyPath) {
console.log(key，key path)；
this.changeIndex(keyPath[1])
},
changeIndex:函数(键){
这个。$emit(IndexChanged ，key)
}
这个。$emit(IndexChanged ，key)是将key的值传递给一个名为IndexChanged的函数，
在index.vue中绑定IndexChanged来接收值，aside v-on:index changed= change($ event)/aside然后调用change函数。注意$ event是固定的写法，收到的键是来自子页的键。然后你可以通过这个键改变索引来切换页面。
下面是一个更简单直观的例子来解释和创建一个新的Test.vue:
模板
div id=应用程序
/div
/模板
脚本
导出默认值{
名称：“测试”，
已安装(){
},
}
/脚本
风格
/风格
构建另一个Test2.vue:
模板
/模板
脚本
导出默认值{
名称：“测试2”
}
/脚本
样式范围
/风格
Test.vue是父组件，Test2.vue是子组件。首先，为Test配置路由，以便可以在浏览器上访问它，并为Test2定义一个模板，它可以在Test中使用。
在router/index.js中添加以下代码
从导入测试./components/Test ；
Vue.use(路由器)
导出默认新路由器({
模式：“历史”，
路线：[
{
路径：“/t”，
名称：“测试”，
组件：测试
}
]
})
在main.js中，添加以下代码：
从导入Test2。/components/Test2 ；
Vue.use(测试2)
新Vue({
埃尔： #app ，
路由器，
组件：{
App，
测试2 :测试2
},
模板：“应用程序/”
})
现在把这个句子写在第二页上，
模板
差异
{{text2}}
/div
/模板
脚本
导出默认值{
名称：“测试2”，
data(){
返回{
文本：“这是测试2页面”
}
}
}
/脚本
样式范围
/风格
将test2引入test，并定义一个变量文本，然后显示在页面上。代码如下：
模板
div id=应用程序
{{text1}}
测试2/测试2
/div
/模板
脚本
从导入Test2。/Test2 ；
导出默认值{
名称：“测试”，
组件：{Test2}，
data(){
返回{
文本：“这是测试1页面”
}
},
已安装(){
},
}
/脚本
风格
/风格
浏览器访问http://localhost:8080/t，页面如下：
现在实现Test2来接收Test1的值并显示：
用于绑定数据的V-bind
Test2 v-bind:text 1= text 1 /Test2
传输的数据是测试页的text1，名称也是text1，可以不一样，但是接收时的名称和第一个是一样的。
2 Test2页面接收数据，通过props接收：
道具：[text1]，
收到后可以传给text2或者直接显示在页面上：
模板
差异
{{text2}}
{{text1}}
/div
/模板
脚本
导出默认值{
名称：“测试2”，
道具：[text1]，
data(){
返回{
文本：“这是测试2页面”
}
}
}
/脚本
样式范围
/风格
收到text1值后，如何同步更改？您需要绑定另一个函数，如下所示：
Test2 v-bind:text 1= text 1 v-on:text changed= change($ event)/Test2
.
方法：{
更改(消息){
this.text1=msg
}
},
在test2中，只需将值传输给textChanged。
已安装(){
这个。$emit(textChanged ，我更改了text1的值)
}
补充知识：在vue中使用vuex，修改state的值
1.安装vuex
npm安装vuex -S
2.在目录中创建一个存储文件。
3.编辑方法以修改store.js中的状态
然后在mian.js全球介绍
用于最终装配
的功能是通过使用突变来修改状态中的值。
上面的vue实现了两个组件之间的数据共享和修改，这是边肖共享的全部内容。希望能给你一个参考，多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。