11. The value passed to the parent component subassembly

Parent component subassembly to pass values

 

Parent component Home.vue

<template>
    <div>
        <h2>{{msg}}</h2>
        <v-header :title="title" :run="run"></v-header>
    </div>
</template>
<script>
import Header from "./Header.vue";
export default {
  name: 'home',  
  data () {
    return {
        msg:'Home assembly ' , 
        title: ' First came the value ' 
    } 
  }, 
  Methods: { 
    RUN (Data) { 
      Alert (Data) 
    } 
  }, 
  Components: { 
    ' V-header ' : Header 
  } 
} 
</ Script > 
< style lang = "SCSS" scoped > 
H2 { 
    Color : Red ; 
} 
</ style >

Subassemblies Heather.vue

< Template > 
    < div > 
        < H2 > {{MSG}} </ H2 > 
        < H2 > {{}} title </ H2 > 
        < Button @click = "RUN (Data)" > In performing parent component subassembly to pass over method </ Button > 
    </ div > 
</ Template > 
< Script > 
Export default { 
  name: ' header ' ,  
  data () {
    return {
        msg:'Head assembly ' , 
        Data: ' parent element method subassembly parameters ' 
    } 
  }, 
  Methods: { 
  }, 
  The props: [ ' title ' , ' RUN ' ], 
  Components: { 
  } 
} 
</ Script > 
< style lang = "SCSS " scoped > 
H2 { 
    Color : Green ; 
} 
</ style >

 

 

 

1. The parent element when referring subassembly dynamic binding properties

 

 2. In the sub-assembly and a data receiving method props pass over from the parent component

 

Guess you like

Origin www.cnblogs.com/xuepangzi/p/11666200.html