vue subassembly call the parent active component or method parameters

A parent component subassembly with time, or a method parameter can be passed to the parent component subassembly, the subassembly can be called directly

父组件：<child-first :value="form">

Sub-components:

  name: "child-first",

  props: {// pass over the receiving parent component values

      value:{}

  },

In js can be called directly: this.value

Directly in html: <span> value </ span>

Second, the method of obtaining the active subassembly parent element:

　　1. The sub-assembly directly call a method or parent component data:

　　　　. This $ parent.value; // get the value of the parent component value

　　　　. Thisd $ parent.run (); // run parent element method

　　But note that there is a pit: method call or when the acquisition is less than the value of the parent component, I used the original Editor's Note it is ivew, third-party components, so get the parent component sub-assemblies, not necessarily get to write their own this component, but third-party components, third-party component is certainly no value or corresponding method, ah! ?

　　That it supposed to do?

　　2. The assembly then passes the parent object to the subassembly, the value of parent element or a method call holding subassembly inside parent element:

<Child-first: value = "form": father = "this"> </ child-first> // parent components pass over the current object

　　In sub-assemblies

  // receiving objects passed over the parent component   
props: {
      value:{},
      father:Object
  },

// call the parent component of value or method 
console.log ( "===============", the this .father.res)
 the this .father.getUserName ()

 

 3. The method may pass to the parent component subassembly, the subassembly called inside:

Parent components:
 // define methods: 
    fatherFunction (Arg) {
           the console.log ( "This is a method parent element:" + Arg)
       }
// component is passed:
    <child-first  @fatherFunction = "fatherFunction"></child-first>

Subassembly:
// call: 
the this . $ EMIT ( 'fatherFunction', the this .res) // The first parameter is the name of the method, the second parameter passed

The following is the full code (third-party component libraries used to see on the line, do not copy)

<template>
  <card class="content">
    <P> This is the parent element </ p> Name:
    <Input v-model="form.name" placeholder="Enter something..." clearable />年龄：
    <Input v-model="form.age" placeholder="Enter something..." clearable type="number" />
    <Divider />
    <Button type = "info" @ click = "sendFirst"> pass values ​​to the first child </ Button>
    <Button type = "success" @ click = "getFirst"> value </ Button> from the first child
    <Button type="warning">Warning</Button>
    <Button type="error">Error</Button>
    <Divider /> Results:
    <Input v-model="res" type="textarea" :rows="4" placeholder="result" />
    <Divider />
    <Row :gutter="16">
        <Col span="12"><child-first :value="form" :father="this" @fatherFunction = "fatherFunction"></child-first></Col>
        <Col span="12"><child-second></child-second></Col>
    </Row>
    
  </card>
</template>
<script>
import ChildFirst from './components/child-first.vue'
import ChildSecond from './components/child-second.vue'
export default {
  name: "data-manager",
  components:{ChildFirst,ChildSecond},
  data() {
    return {
      form: {
        name: "admin",
        age: 12
      },
      res: "123"
    };
  },
  mounted(){},
  methods:{
       sendFirst(){

       },
       getFirst(){

       },
       getUserName () {
           the console.log ( "This is a method parent element" )
       },
       fatherFunction(arg){
           the console.log ( "This is a method parent element:" + Arg)
       }
  }
};
</script>
<style lang="less" scoped>
.content {
  margin-top: 20px;
  text-align: left;
  overflow: scroll;
  background-color: #f0f0f0;
  height: 800px;
  p {
    text-align: left;
    margin-bottom: 20px;
  }
}
</style>

then:

<template>
  <Card class = "content": dis-hover = "true" title = "I am the first child of the tag">
    <Divider /> Name:
    <Input v-model="form.name" placeholder="Enter something..." clearable />年龄：
    <Input v-model="form.age" placeholder="Enter something..." clearable type="number" />
    <Divider />
    <Button type = "info" @ click = "getFather"> Get value of parent element </ Button>
    <Button type="success">Success</Button>
    <Button type="warning">Warning</Button>
    <Button type="error">Error</Button>
    <Divider />
    <Divider /> Results:
    <Input v-model="res" type="textarea" :rows="4" placeholder="result" />
    <Divider />
  </Card>
</template>

<script>
export default {
  name: "child-first",
  props:{
      value:{},
      father:Object,
    //    getUserName: {// found written not write all lines 
    //        of the type: Function 
    //    } 
  },
  data() {
    return {
      form: {
        name: "llee",
        age: 21
      },
      res: "result"
    };
  },
  mounted(){
      this.form = this.value;
  },
  methods:{
      getFather(){
          console.log("===============",this.father.res)
          this.father.getUserName()
          this.res = this.father.res;

          this.$emit('fatherFunction', this.res)
      }
  }
};
</script>
<style lang="less" scoped>
.content {
  margin-top: 20px;
  background-color: #97c9a7;
}
</style>

Well, so I will write about the other by value