On VUE issue by value, from father to son father, brother Chuan brother. . .

First, let's define the three pages, a main page, two sub-pages

Example: myForm myTabel and two sub-pages are defined

The first step: the introduction of the Home Page

import myForm from "@/MyForm";

import myTabel from "@/MyTable";

Step two: Components  (completing registration registered or will be error must be the third step.)

components: {
    myForm,
    myTabel,
}

The third step: Insert

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

　　

By value method -----------

Father to son

Example: I defined a list of data in the data;

 

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

 

The first step: to transfer data

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

: Sub-pages to receive name = ' need to pass the last name '

Step two: sub-pages receive data

 

props: ['parentData']

 

 

Parent child transmission

Example:

The first step: define an event

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

 

Step Two: Write method methods

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

(), The first parameter is the name of the parent page event needs to be received, and the second parameter is the data that you need to pass in the past.

The third step: the receiving parent page

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

Use @ reception, the first value in the sub-page definition name, behind the name of this page is the event's own definition, by an event, get value

 

Brothers by value

First, we define a method in main.js

Vue.prototype. Method name = new Vue ()

A page

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

　Similarly, define an event, then use this.public. $ Emit ( "second page needs to receive name", "The second value is the data pass") incoming data

 

Page two

Example: In the created reception function in the life cycle

 

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

 

. this.public $ on ( " first on one page definition name " , " the second is a function (parameter 1 : the last pass over the pages of data) ")