从新搭建我的项目
进入以个文件夹:cd vuewebpackapp
初始化这个我的项目:vue init webpack vuexapp
一系列的抉择确认后
就会创立好文件
在搭建好的环境中操作
父组件传递数据给子组件
在components新建parent.vue(父组件)和一个son.vue子组件;
在父组件内引入子组件import son from './son',并传msg给子组件
子组件如何接管父组件传递的内容:
helloworld.vue
子组件传数据给父组件
父组件从子组件接收数据,如何设置
子组件向父组件传递数据
在子组件设置按钮
在父组件里接管
渲染在页面上
VUEX的作用?
例如关上淘宝下面有很多不同的界面和组件,然而每一个组件都晓得我的登录状态,就是用vuex来实现的
用来治理状态,共享数据,在各个组件之间治理内部状态,如何应用?
第一步:引入vuex,通过use办法应用它;
第二步:创立状态仓库;
第三步:通过this.$store.state.xxx间接拿到须要的数据
//创立状态仓库
var store = new Vuex.Store({
state:{XXX:xxx}
})
//间接通过this.$store.xxx拿到全局状态
复制代码
新建outter.vue
outter文件和parent和son文件,没有父子关系,然而又想让他们之间共享数据,就用到vuex文件;
在终端装置:npm i vuex
在main.js中引入Vuex:import Vuex from 'vuex'
接着在main.js中use一下:Vue.use(Vuex)
创立状态仓库
var store = new Vuex.store({ state:{ num:88 } })
在son.vue文件中如何获取文件?
把这个计算属性渲染到页面上:
在父组件中的代码与子组件相似,只是getNum换成getCount
在outter中 也是一样
三个组件都拿到了Num:88,实现了资源共享。
最初
如果你感觉此文对你有一丁点帮忙,点个赞。或者能够退出我的开发交换群:1025263163互相学习,咱们会有业余的技术答疑解惑
如果你感觉这篇文章对你有点用的话,麻烦请给咱们的开源我的项目点点star: https://gitee.com/ZhongBangKe...不胜感激 !