1.父组件给子组件传参
(1).在父组件模板里面找到子组件标签
(2). 在子组件标签上面通过 v-bind:自定义属性名="父组件的变量"
(3) 在子组件的export default对象里面 定义 props接收绑定过来的属性
接收方式有两种:
1. props:["自定义属性名1","自定义属性名2"...]
这里面的属性名 就是 子组件标签上面通过v-bind绑定的自定义属性
props注册的名字 就可以直接当做data里面的一个变量 在页面直接使用
2.props:{
自定义属性名1:该属性的构造函数名字(如果是基本数据类型 则写对应的包装类型)
}
注意点:
父组件给子组件传参是单向数据绑定 父组件数据变 子组件跟着变化
但是子组件接收到的变量 不能修改值一旦修改就报错
2.子组件给父组件传递参数
子组件要想给父组件传参 那么必须受事件驱动
1.在子组件的事件驱动函数里面
2.通过子组件对象 调用$emit方法
this.$emit("自定义事件名称",要传的数据1,要传的数据2...)
3.在父组件模板中 找到子组件标签
4.通过 v-on/@ 绑定$emit方法的第一个参数的事件名称
5.该事件等于一个父组件的一个驱动函数(在methods里面定义)
6.事件驱动函数的参数就是传递过来的数据
(如果参数是一个对象 在父组件里面改这个对象属性的值 子组件同样改变)
3.父组件直接调用子组件的方法
1.在父组件模板中找到子组件标签
2.在子组件标签上面 定义 ref属性 值自定义
3.在父组件的代码中 通过父组件对象(this).$refs.自定义的名字.子组件的方法来调用
<Child ref="child"></Child>
show(){
this.msg=this.$refs.child.getData()
}
4.发布者和订阅者 eventbus事件总线 传参
vue实例对象有关于发布者和订阅者模式的方法:
所谓的发布者值的是: 事件的发起人 并且传入指定数据
订阅者是值 绑定这个事件的那些人 可以接收到发布者发布的数据
一个发布者可以对应 多个订阅者
vue实例关于发布订阅模式的方法:
$emit()发布事件(事件触发)
$on()订阅事件(事件绑定)
$once() 只订阅一次
$off() 取消订阅(事件解绑)
为了能够实现组件间数据传递(使用发布订阅模式)
我们选择使用一个空的vue对象
步骤:
1 在store文件里面 定义index.js(其他名字 bus.js)
2. 在js里面 引入vue模块 默认对外导出 new Vue();
3.哪一个组件想要使用这个对象 就引入即可
通过 空的vue对象 调用 $on("自定义事件名称",事件驱动函数) 绑定事件
通过 空的vue对象 调用 $emit("自定义事件名称",传递的参数...) 发布事件
$on必须在 $emit之前执行
5.Vuex (状态管理仓库)
五大模块:
1.state 定义数据变量
2.mutations 针对store数据变量的更改方法
3.getters 定义各种计算属性
mapGetters
4.actions 针对计算属性数据变化的方法
mapActions
actions里面可以定义异步操作的方法
5.modules
定义数据管理模块 把数据的增删改查封装到单独模块里面
针对上面四个模块的 模块化封装
使用步骤:
1.下载依赖 yarn/npm add/install vuex --save
2.在src文件夹下面定义store文件 创建index.js
3.在index.js里面 引入vue模块 引入vuex模块
4.创建vuex实例 并配置五大模块的功能
5.最后对外导出vuex实例
6.在main.js引入vuex实例 并注册到vue实例里面去
7.全局可以使用this.$store访问vuex实例
全局获取state数据:
this.$store.state.变量
修改state里面变量的数据
this.$store.commit("mutations的一个方法名",传入的修改参数)
必须在mutations里面定义修改方法 对state变量进行操作
不推荐直接操作state变量数据
优点:
vuex里面的数据全局都可以访问
缺点:
vuex的数据一旦页面刷新就会回归默认值
如果state里面的变量不是提前定义好的 而是后期动态绑定的
那么页面刷新 这个属性就会消失 除非重新绑定
如何处理数据刷新会丢失呢?
Vuex需要结合session进行使用处理数据刷新丢失问题:
配置页面刷新前事件 然后把vuex数据存储到session里面一份
然后页面刷新完成后 再把数据拿出来 放到vuex里面去
created(){
//页面刷新完成后执行的代码
let per=sessionStorage.getItem("per");
if(per) this.$store.commit("setNewPer",JSON.parse(per));
//在session里面不管有没有这个数据 现在都应该删除了
sessionStorage.removeItem("per");
//页面刷新之前执行的事件
window.addEventListener("beforeunload",()=>{
// 把vuex数据存储一份到session里面去
sessionStorage.setItem("per",JSON.stringify(this.$store.state.per))
})
}
6.路由传参有两种方式:
1. push/replace({
path:"/路由路径",
query:{
键值对
}
})
获取方式:
this.$route.query获取
2. push/replace({
name:"路由配置时的name值",
params:{
键值对
}
})
获取方式:
(1).this.$route.params获取
(2).组件中也可以用props来进行接受参数,
在路由配置中设置props为true:
然后在组件中设置props来接收这个参数 props:["name","age"]
区别:
1. path+query的方式传递过去的参数 会在地址栏体现出来
刷新数据还在
name+params的方式传递过去的参数 地址栏没有
刷新数据会丢失 (可以自己想办法保存数据)
2.使用params传参只能由name引入路由,如果写成path 参数会显示undefined。
3.使用query传参的话可以使用path也可以使用name引入路由,不过建议使用path引入路由。