vue 父子孙页面传值的多种方法

父给子

第一种 props 缺点：只能一级一级的传值 子页面不能修改这个参数

父页面
<template>
  <div >
    <h1>主页面h1>
    <hr />
    <vue1 :x1x2="传达参数">vue1>   //这里自己写或者给定义变量
  div>
template>

  data() {
    return {
      x1x2: "asdasdasd"   //这里可以定义
    };
  }
子页面 这样就能获取参数 随便一个地方就能从console.log()出来
export default {
  props:{
    x1x2:{}
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

第二种 this.$parent 子页面直接获取父的变量

父页面只需要data
  data() {
    return {
      ccc:"000000"
    };
  }
 子页面
 console.log(this.$parent.ccc)   就能获取
1
2
3
4
5
6
7
8

父给孙 （父给所有的下面页面直接给值）

provide 依赖

父页面创建好
export default {
  provide() {  //依赖 可以父给下面的子、孙等页面直接传值
    return {
        x1x2:"000000"
    };
  }
}
子   就拿到了
export default {
  inject:['x1x2']
}

1
2
3
4
5
6
7
8
9
10
11
12
13

子给父

第一种 需要子页面关闭或者改变才传值

子页面
<div>
    <h2>这是vue1页面h2>
    <botton @click="dianji">点击botton>
  div>
export default {
  data(){
    return{
        ddd:"22222"
    }
  },
  methods:{
    dianji(){
      this.$emit('change',this.ddd);  //发送 
    }
  }
}

父页面
 <div >
    <h1>主页面h1>
    <vue1 @change="ddd">vue1>
  div>
methods: {
    ddd( val ){   //val 传来的值
      console.log("父的打印机")
      console.log(val)
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

第二种 this.$children

子页面
定义好变量名，父页面直接拿

父页面
  mounted(){
    console.log("父页面自动获取")
    //children[0]的是意思是第1个页面，可能父页面有多个子页面，按代码写的子页面先后顺序
    this.ccc = this.$children[0].ddd;
    console.log(this.ccc)
  },
1
2
3
4
5
6
7
8
9
10

第三种 ref

子页面
<div>
    <h2>这是vue1页面h2>
    <botton @click="dianji">点击botton>
  div>
export default {
  data(){
    return{
        ddd:"22222"
    }
  },
  methods:{
    dianji(){
      this.$emit('change',this.ddd);  //发送 
    }
  }
}

父页面
 <div >
    <h1>主页面h1>
    <vue1 ref='childsss'>vue1>
  div>
mounted(){
    console.log("父页面自动获取")
    console.log(this.$refs.childsss.ddd)  // ddd  是变量，可以换取决于子页面的变量名
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27