浅谈VUE传值问题，父传子，子传父，兄弟传兄弟。。。

Posted 2021-03-03 yetiezhu

首先我们先定义3个页面，一个主页面，两个子页面

例：myForm 和 myTabel 是定义的两个子页面

第一步：在主页面引入

import myForm from "@/MyForm";

import myTabel from "@/MyTable";

第二步：在 components 注册  (注册完必须进行第三步。不然会报错）

components: {
    myForm,
    myTabel,
}

第三步：插入

<myForm></myForm>
<myTabel></myTabel>

　　

传值方法-----------

父传子

例：我在data里定义了一个list的数据；

 

list: [
        { id: 1, name: "铁柱", age: 18, sex: "男" },
]	

 

第一步：传递数据

 <myTabel :parentData="list"></myTabel>　

：子页面去接收的名字=‘需要传入过去的名字‘

第二步：子页面接收数据

 

props: [‘parentData‘]

 

 

子传父

例:

第一步：定义一个事件

<el-button type="primary" @click="updateBtn(item.id)">确 定</el-button>

 

第二步：在methods写入方法

methods: {
    updateBtn(id) {
      this.$emit("update-data", id);
　　}
}

()里，第一个参数是父页面需要接收的事件名字，第二个参数是你需要传过去的数据。

第三步：父页面接收

<myTabel :list="list"  @update-data="updateData"></myTabel>

接收使用@，第一个值在子页面定义的名字， 后面的是本页面自己定义的事件名，通过事件，拿到值

 

兄弟传值

首先我们在main.js定义一个方法

Vue.prototype.方法名 = new Vue()

页面一

<el-button type="primary" @click="updateBtn(item.id)">确 定</el-button>
methods: {
    updateBtn(id) {
          this.public.$emit("update-data", id);
    }
}

　同理，先定义一个事件，然后， 使用　this.public.$emit("第二个页面需要接收的名字"，"第二个值是传的数据") 传入数据

 

页面二

例：在created生命周期函数里接收

 

created(){
    This.public.$on(‘update-data’, value=>{
        console.log(value)  取值
    })
}    

 

this.public.$on("第一个上个页面定义的名字"，"第二个是一个函数（参数1：上个页面传过来的数据）")