vue各组件如何引用(Vue局部组件数据共享Vue.observable的使用)
类别:编程学习 浏览量:1036
时间:2021-10-21 07:45:33 vue各组件如何引用
Vue局部组件数据共享Vue.observable的使用随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。
创建store对象
首先创建一个 store.js,包含一个 store和一个 mutations,分别用来指向数据和处理方法。
//store.js import Vue from 'vue'; export let store =Vue.observable({count:0,name:'李四'}); export let mutations={ setCount(count){ store.count=count; }, changeName(name){ store.name=name; } }
把store对象应用在不同组件中
然后再在组件中使用该对象
//obserVable.vue <template> <li> <h1>跨组件数据状态共享 obserVable</h1> <li> <top></top> <bottom></bottom> </li> </li> </template> <script> import top from './components/top.vue'; import bottom from './components/bottom.vue'; export default { name: 'obserVable', components: { top, bottom } }; </script> <style scoped> </style>
//组件a <template> <li class="bk"> <span ><h1>a组件</h1> {{ count }}--{{ name }}</span > <button @click="setCount(count + 1)">当前a组件中+1</button> <button @click="setCount(count - 1)">当前a组件中-1</button> </li> </template> <script> import { store, mutations } from '@/store'; export default { computed: { count() { return store.count; }, name() { return store.name; } }, methods: { setCount: mutations.setCount, changeName: mutations.changeName } }; </script> <style scoped> .bk { background: lightpink; } </style>
//组件b <template> <li class="bk"> <h1>b组件</h1> {{ count }}--{{ name }} <button @click="setCount(count + 1)">当前b组件中+1</button> <button @click="setCount(count - 1)">当前b组件中-1</button> </li> </template> <script> import { store, mutations } from '@/store'; export default { computed: { count() { return store.count; }, name() { return store.name; } }, methods: { setCount: mutations.setCount, changeName: mutations.changeName } }; </script> <style scoped> .bk { background: lightgreen; } </style>
显示效果
到此这篇关于Vue局部组件数据共享Vue.observable()的使用的文章就介绍到这了,更多相关Vue.observable() 数据共享内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
标签:Vue.observab 数据共享
热门推荐
- sql server中实现split功能
- sql语句执行顺序
- 修改docker镜像的环境变量(解决docker加载新的镜像后repository和tag名称都为none的问题)
- sqlserver2012卸载工具(Windows下SQL Serever 2012彻底卸载删除教程)
- php运行环境的搭建方法(php集成开发环境详解)
- linux查询服务重启(Linux上定位后台服务偶发崩溃的解决方法)
- tomcat架构结构图(Tomcat核心组件及应用架构详解)
- mysql高级变量查询(MySQL 使用自定义变量进行查询优化)
- php闰年计算公式(php判断/计算闰年的方法小结三种方法)
- dedecms如何做弹窗(dedecms实现将表单订单发送到邮箱实例代码)