经过query参数来进行参数的传递javascript
咱们能够在路由组件的路由配置对象里写上咱们须要传递的参数,而后经过this.$route.path.query来获取到咱们传递的参数。好比:vue
const route=[
{
path:"/one",
query:{
id:1, //这样咱们就能够经过this.$route.query来获取query参数
}
}
]
复制代码
经过params传递参数java
咱们须要在路由配置对象里这样写webpack
const route=[
{
path:"/one:id",//这样这个id就是params参数沃恩能够经过this.$route.params
component:index
}
]
复制代码
Vue的组件通讯分为如下三种:web
父子通讯vue-cli
好比a组件是b组件的子组件,咱们先给在b组件的组件模板中找到a组件标签而后给a组件标签绑定自定义属性,属性值是要传递的数据。而后在a组件的组件配置里经过props进行接收,而后直接把传递过来的数据当成a组件配置对象的data里的数据用便可。npm
//这里是b组件的组件模板,index标签是a组件的组件标签,num是自定义属性,net是要传递的数据
<index :num="net"></index>
//这里是a组件的组件配置
props:["num"]
//还能够这样接收
props:{
num:Array
}
复制代码
子父通讯:app
好比a组件是b组件的子组件,咱们须要在b组件的组件模板里找到a组件的组件标签给a组件的组件标签绑定自定义事件,而后在b组件的配置里的methods里写上自定义事件的事件函数该事件函数有一个参数就是传递过来的参数,咱们须要如今a组件的组件模板中选择一个标签绑定原生事件而后在该原生事件的事件函数里调用this.$rmit("在b组件的组件模板中给a组件的组件标签绑定的自定义事件",要传递的数据)函数
//这里是b组件的组件模板,index标签就是a组件的组件标签
<index @chuandi="chuandi"></index>
//这里是b组件的组件配置
methods:{
chuandi(net){
//这个net就是传递过来的数据
}
}
//这里是a组件的组件模板
<div>
<button @click="net"></button>
</div>
//这里是a组件的配置
methods:{
net(){
this.$emit("chuandi",传递的数据)
}
}
复制代码
非父子通讯:ui
想要实现一个非父子通讯咱们须要建立一个新的new Vue实例化对象而后经过该新建立的实例化对象去进行传递数据
//a组件和b组件是非父子关系,而后a组件向b组件传递数据
//bat就是新建立的实例化对象
const bat=new Vue({})moban
//先在a组件的组件模板中选择一个标签绑定原生事件
//这里是a组件的组件模板
<div>
<button @click="hei"></button>
</div>
//这里是a组件的组件配置
methods:{
hei(){
bat.$emit("自定义事件名",传递的数据)
}
}
//而后在b组件的组件配置的created里使用去监听自定义事件
//这里是b组件的组件配置
created(){
this.&on("自定义事件名",(da)=>{
da就是传递过来的数据
})
}
复制代码
咱们还能够使用veux去进行组件与组件之间的相互通讯。
通常都是使用vue-cli配置好的,直接输入命令行npm run build
这个问题深刻研究webpack后会进行更新。
ES6是ECMA组织为javascript定制的第六个版本,ES6以后全部的ES2015,ES2016,ES2017,ES2018,ES2019,ES10,等均可以统称为ES6。