发表于: 2019-11-24 23:53:06
1 1190
今天完成的事情:
通过props进行父子组件传参,也就是引用组件。
先创建一个子组件,这个是必须的,然后:
export default {
props: ["songList"], //通过props接收父组件传送的数据
};
调用props
先声明引用一下
import songList from "./Songlist.vue"
return {
songList: []
};
components: {
songList,
},
2,通过路由跳转
export default {
props: ["songList"],
methods: {
selectSong(item) {
// 直接调用$router.push,实现携带参数的跳转
// this.$router.push({
// "name" : "Detail", //发送跳转页面名字
// "params" : {item,item} //TODO: 通过路由的params进行传参
// })
this.$router.push({
"path": "/detail/:item",
"query": {item: JSON.stringify(item)} //TODO: 通过路由的query进行传参
})
},
}
};
3,通过params传参
.png)
export default {
data() {
return {
songDetail: {}
}
},
mounted () {
//TODO:parmas传参不可以刷新,会丢失数据,query可以刷新页面
// console.log(this.$route.params) //$route接收传递的参数
// this.songDetail = this.$route.params.item //TODO: params接收路由传递的参数
this.songDetail = JSON.parse(this.$route.query.item); //TODO: query接收路由传递的参数
},
}
vue 路由传参 params 与 query两种方式的区别
1、用法上的
刚才已经说了,query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。
注意接收参数的时候,已经是$route而不是$router了哦!!
2、展示上的
query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
3,通过vuex跳转
vuex实现及简略解析(小结)
安装并使用store
store,意思是商店
在src下新建一个vuex.js文件,然后代码如下
'use strict'
let Vue = null
class Store {
constructor (options) {
let { state, getters, actions, mutations } = options
}}// Vue.use(Vuex)const install = _Vue => {
// 避免vuex重复安装
if (Vue === _Vue) return
Vue = _Vue
Vue.mixin({
// 通过mixins让每个组件实例化的时候都会执行下面的beforeCreate
beforeCreate () {
// 只有跟节点才有store配置,所以这里只走一次
if (this.$options && this.$options.store) {
this.$store = this.$options.store
} else if (this.$parent && this.$parent.$store) { // 子组件深度优先 父 --> 子---> 孙子
this.$store = this.$parent.$store
}
}
})}
export default { install, Store }
然后修改store.js中的引入vuex模块改成自己的vuex.js
import Vuex from './vuex' // 自己创建的vuex文件
在我们的代码中export default { install, Store }导出了一个对象,分别是install和Store
install的作用是,当Vue.use(Vuex)就会自动调用install方法,在install方法里面,我们用mixin混入了一个beforeCreate的生命周期的钩子函数,使得当每个组件实例化的时候都会调用这个函数。
在beforeCreate中,第一次根组件通过store属性挂载$store,后面子组件调用beforeCreate挂载的$store都会向上找到父级的$store,这样子通过层层向上寻找,让每个组件都挂上了一个$store属性,而这个属性的值就是我们的new Store({...})的实例。
- 安装vuex npm install vuex --save
vue传参的原理主要在于 Vue.$route.params (也有 $route.query)
$route是Vue的属性,params是$route的属性,用来储存数据的键值对(对象形式,{key:value}),储存很多属性(键值对,属性,属性值)在里面.
.png)
.png)
明天计划的事情:
明天计划上午再把编辑器搞定,任务六到十就算是结束了。
遇到的问题:
记录页面跳转如何传值的问题,也就是跳转到编辑页面。今天的报错都是一些比较愚蠢的错误,
.png)
上面那个把他改成我组件的名字了,我以为要改一下的,结果改错了。
第二个问题,wangbditor多写了引用的东西,之前已经把他封装成组件了,就不需要在主页里载引用了。
收获:
学习了一下vue的传参方式,写好了编辑页面。
评论