父传子 props属性方式 子传父 $emit()
父组件
<template>
<div>
<div>来自子组件：{{childData}}</div>
<el-button type="primary" @click="updataChild">传给子组件</el-button>
<Child :parentData ='parentData' @updataParent="updataParent"></Child>
</div>
</template>
<script>
import Child from "./component/child.vue";
export default {
data(){
return{
parentData:'',
childData:''
}
},
components:{
Child
},
methods:{
updataChild(){
this.parentData = '我是父亲传过来的'
},
updataParent(val){
this.childData = val
}
}
}
</script>
<style>
</style>
子组件
<template>
<div>
<div>来自父亲参数：{{parentData}}</div>
<el-button type="primary" @click="updataParent">传给父组件</el-button>
</div>
</template>
<script>
export default {
props:{
parentData:{
type:String,
default:()=>{
return ''
}
}
},
data(){
return{
childData:'子组件的信息'
}
},
methods:{
updataParent(){
this.$emit('updataParent',this.childData)
}
}
};
</script>
<style>
</style>
EventBus 事件总线
main.js 挂载
Vue.prototype.$bus = new Vue();
this.$bus.$emit('son',this.obj)传递参数
<template>
<div>
<el-button type="warning" @click="putMessage">son传给兄弟</el-button>
</div>
</template>
<script>
export default {
data(){
return{
obj:{
name:'son',
age:'1'
}
}
},
methods: {
putMessage(){
this.$bus.$emit('son',this.obj)
}
},
};
</script>
<style>
</style>
this.$bus.$on('son',function(sonData){
console.log(sonData,'000');
this.name = sonData.name
})
接受参数
<script>
export default {
props:{
parentData:{
type:String,
default:()=>{
return ''
}
}
},
data(){
return{
childData:'子组件的信息',
name:''
}
},
mounted(){
this.$bus.$on('son',function(sonData){
console.log(sonData,'000');
this.name = sonData.name
})
},
methods:{
updataParent(){
this.$emit('updataParent',this.childData)
}
}
};
</script>
父子之间嵌套传参 this.$parent
父子之间嵌套传参 this.$children
子组件 this.$parent
methods:{
getParent(){
console.log(this.$parent);
}
}
父组件 this.$children
methods:{
getChild(){
console.log(this.$children);
}
}
v-bind="$attrs" 跨层级传参
父元素
<template>
<div>
<Son :putGrandSon ='putGrandSon'></Son>
</div>
</template>
<script>
import Son from './component/son.vue';
export default {
data(){
return{
putGrandSon:'给孙子的数据'
}
},
components:{
Son
},
methods:{
}
}
</script>
<style>
</style>
儿子组件
中间层，作为父组件和孙子组件的传递中介，在儿子组件中给孙子组件添加v-bind="$attrs"，这样孙子组件才能接收到数据
<template>
<div>
<inner-child v-bind="$attrs"/>
</div>
</template>
<script>
import innerChild from './innerChild.vue';
export default {
inheritAttrs: true, //继承所有父组件的内容 必须要的
components: { innerChild },
data(){
return{
},
methods: {
},
};
</script>
<style>
</style>
孙子组件
<template>
<div>
<div>来自于爷爷的数据------{{putGrandSon}}</div>
</div>
</template>
<script>
export default {
props:{
putGrandSon:{
type:String,
default:()=>{
return ''
}
}
}
}
</script>
<style>
</style>
$listeners 的使用方法
父亲组件
<template>
<div>
<Son :putGrandSon ='putGrandSon' @update="getInnerData"></Son>
<div>{{listeners}}</div>
</div>
</template>
<script>
import Son from './component/son.vue';
export default {
data(){
return{
putGrandSon:'给孙子的数据'
listeners:'默认listeners'
}
},
components:{
Son
},
methods:{
getInnerData(data){
this.listeners = data.text
}
}
}
</script>
<style>
</style>
儿子组件
<template>
<div>
<inner-child v-bind="$attrs" v-on="$listeners"/>
</div>
</template>
<script>
import innerChild from './innerChild.vue';
export default {
inheritAttrs: true,
components: { innerChild },
data(){
return{
obj:{
name:'son',
age:'1'
}
}
},
methods: {
},
};
</script>
<style>
</style>
孙子组件
<template>
<div>
<div>来自于爷爷的数据------{{putGrandSon}}</div>
<el-button type="primary" @click="setLister('设置listeners的值')">listeners</el-button>
</div>
</template>
<script>
export default {
props:{
putGrandSon:{
type:String,
default:()=>{
return ''
}
}
},
methods:{
setLister(val){
let data ={
text:val
}
this.$emit("update",data)
}
}
}
</script>
<style>
</style>
Vue路由传参 query方式、params方式
query方式
<template>
<div>
<el-button type="primary" @click="putQuery">页面跳转传参</el-button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
putQuery() {
this.$router.push({
path: "/query", //方式1：通过path跳转
query: {
uid: 1,
name: "query传参",
},
});
// this.$router.push({
// name: "Update", //方式2：通过name跳转
// query: {
// uid: 111,
// name: "xiaoming",
// },
// });
},
},
};
</script>
<style>
</style>
<template>
<div>
<span>{{id}}</span>
<span>{{name}}</span>
</div>
</template>
<script>
export default {
data() {
return {
name: "",
id: "",
};
},
mounted() {
this.id = this.$route.query.uid;;
this.name = this.$route.query.name;
},
};
</script>
<style>
</style>
params 页面跳转传参
<template>
<div>
<el-button type="primary" @click="putParmas">parmas页面跳转传参</el-button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
putParmas() {
this.$router.push({
name: "mvvm", //只能通过name跳转
params: {
uid: 122,
name: "params传参",
},
});
},
},
};
</script>
<style>
</style>
<template>
<div>
<span>{{id}}</span>
<span>{{name}}</span>
</div>
</template>
<script>
export default {
data() {
return {
name: "",
id: "",
};
},
mounted() {
this.id = this.$route.params.uid;
this.name = this.$route.params.name;
},
};
</script>
<style>
</style>
