vue neutron component invokes the parent element inside the parent component data and method calls and data methods subassembly

1. subassembly data call and direct methods parent component

In the parent component father, vue 

<Template> 
  <div> 
    <-! inside parent component data -> 
    <P> parent element inside the data Data} {} {</ P>   

    <-! parent component inside the process -> 
    <P the Click = " Test " methods methods> parent element inside </ P> 
    <-! using components -> 
    <Child> </ Child>     
  </ div> 
</ Template> 
<Script> 
Import Child from  ' ./ components / child.vue ' // introduced subassembly 
Export default { 
  components: { 
    // Register assembly 
    child 
  }, 
  Data () { 
    return { 
      Data: 'My parent element Data ' 
    }
  },
  Methods: { 
    Test () { 
      the console.log ( ' clicked parent element ' ) 
    } 
  } 
}
 </ Script>

 

The following data and call methods in the parent element subassembly

 

<Template> 
  <div> 
    <@ the Click the Button = " toFather " > I am a subcomponent {{ the this $ parent.data}.} </ the Button> 
    <-! the this $ parent.data get data parent component - > 
  </ div> 
</ Template> 
<Script> 
Export default { 
  Data () { 
    return {} 
  }, 
  methods: { 
    toFather () { 
      // Get $ parent.test method directly by the this (). 
      the this $ parent.. Test () 
    } 
  } 
}
 </ Script>

 

to sum up:

    Direct this. $ Parent.prop call data in the sub-assembly

    this. $ parent.fn () method call

 

2. parent component data and method calls directly subassembly

Local call parent component subassembly, add a ref attribute of the attribute value that is arbitrarily defined in the parent component assembly father.vue

 

<Template> 
  <div> 
    I am a parent component
     <! - ref calls the children of this component to add property -> 
    <Child ref = " getData " > </ Child>     
    <@ the Click the Button = " getChild " > Click the button to get a sub-assemblies data MSG </ Button> 
  </ div> 
</ Template> 
<Script> 
Import child from  ' ./components/child.vue ' // introduced subassembly 
Export default { 
  components: { 
    // Register assembly 
    child 
  }, 
  data ( ) { 
    return { 
    } 
  },
  methods:{
    getChild(){
      // this.$refs.getdata.msg 拿到数据
      console.log(this.$refs.getdata.msg)
    }
  }
}
</script>

 

child.vue data

<Template> 
  <div> 
    <Button> I sub-assembly </ Button> 
  </ div> 
</ Template> 
<Script> 
Export default { 
  Data () { 
    return { 
      MSG: ' I subassembly data ' 
    } 
  }, 
  Methods : { 
  } 
}
 </ Script>

to sum up:

　　Local calls the parent component sub-assemblies, add a ref property, the property values of any definition of
　　a parent component of an event, you can. $ Refs.test.prop get data sub-assemblies through this, through this. $ Refs.test .fn () method call subcomponents