第一、父组件传给子组件
1、在父组件中应用组组建的标签上声明你要传的值,通过 v-bind
的形式进行传递。
2、在子组件中定义一个props,来接收穿的值。
例子:
father.vue中
<template>
<Children :msg="message"></Children>
</template>
children.vue中
<script>
export default {
name: "Children",
props:['msg'],
data() {
return {
childrenMsg:this.msg
}
},
methods: {}
}
</script>
第二、子组件给父组件传值
1、崽子组件中使用this.$emit(‘ ’)。
2、在父组件中使用自定义事件获取子组件传递过来的值。
例子:
children.vue
<template>
<div @click="children">click me</div>
</template>
<script>
export default {
name: "Children",
data() {
return {
childrendata:10
}
},
methods: {
children(){
// 通过自定义事件childrenNum把值传给父组件
this.$emit('childrenNum',this.childrendata)
}
}
}
</script>
father.vue
<template>
<div class="parent">
子组件的传值:{{fatherNum}}
<children @childrenNum="getNum"></children>
</div>
</template>
<script>
import children from '../components/children'
export default {
name: 'Parent',
components: {
childrenCom
},
data() {
return {
fatherNum: 0
}
},
methods:{
// childrenNum是由子组件传入的
getNum(childrendata){
this.fatherNum = childrendata
}
}
}
</script>
第三、兄弟组件之间传值
兄弟组件间的传值,我了解的有三种形式:
1、全局事件总线bus
(1)在项目中创建一个单独的eventBus.js文件
(2)在eventBus.js文件中
import Bus from 'vue';
let install = function (Vue) {
Vue.prototype.$bus = new Bus()
}
export default { install };
(3)在main.js
中引入vueBus
import vueBus from '@/utils/vueBus';
Vue.use(vueBus);
(4)在.vue文件中发送、接收、销毁
//发送
this.$bus.$emit('updateShowSide', false)
//接收
this.$bus.$on('updateShowSide', data => {
this.showSide = data
})
//销毁
this.$bus.$off("updateShowSide");
2、vuex,篇幅太长,单独记一下。
3、子传父后再父传子,就是第一和第二。
第四、vue-router路由跳转
分为三种方式:
1、vue-router
(1)不带参数
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
(2)带参数
// params传参数
<router-link :to="{name:'home', params: {id:1}}">
//注意:
// 路由需要配置 path: "/home/:id" 或者 path: "/home:id" 如果不配置的话第一次可以正常请求,刷新一次页面后id会消失;如果配置了path,刷新页面id就会保留。
// html 接收参数 $route.params.id
// script 接收参数 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}">
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 接收参数 $route.query.id
// script 接收参数 this.$route.query.id
2、this.$router.push() (函数里面调用)
(1)不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
(2)带参数
query传参:
this.$router.push({name:'home',query: {id:'1'}})
或
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
params传参
his.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由需要配置 path: "/home/:id" 或者 path: "/home:id" 如果不配置的话第一次可以正常请求,刷新一次页面后id会消失;如果配置了path,刷新页面id就会保留。
// html 取参 $route.params.id
// script 取参 this.$route.params.id
直接通过path传参
this.$router.push({path:'/home/123'})
或
this.$router.push('/home/123')
// 获取参数:this.$route.params.id
3、this.$router.replace() (用法同上,push)
注意:push跳转到指定url路径,并在history栈中添加一个记录,点击后退会返回到上一个页面;replace跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)
4、this.$router.go(n)
向前或者向后跳转n个页面(n可为正整数或负整数)