Between the traditional values vue components, the parent method of obtaining subassembly

1, the traditional values ​​subassembly parent component

   Subassembly

<template>
    <div class="app">
       <input @click="sendMsg" type="button" value="给父组件传递值">
    </div>
</template>
<script>
export default {
 
    data () {
        return {
            msg: "I am msg subcomponents" ,
        }
    },
     methods:{
         sendMsg(){
             // FUNC: transmitted data is a function of binding the specified component to the parent, this.msg: data sub-assembly components to the parent passed 
             the this . $ EMIT ( 'FUNC', the this a .msg)
         }
     }
}
</script>

  

Subassembly pass a value to the parent component through this. $ Emit () manner

Note: func function name here is the parent component in binding

Parent component:

<template>
    <div class="app">
        <child @func="getMsgFormSon"></child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            msgFormSon: "this is msg"
        }
    },
    components:{
        child,
    },
    methods:{
            getMsgFormSon(data){
                this.msgFormSon = data
                console.log(this.msgFormSon)
            }
    }
}
</script>

 

2, to the parent component subassembly traditional values

Parent component

<template>
    <div class="app">
        <child :date="msg"></child>
    </div>
</template>
<script>
import child from './child.vue'  //子组件
export default {
    data () {
        return {
            msg: "this is msg"
        }
    },
    components:{
        child, parent components added to the assembly
    }
}
</script>

Subassembly

<template>
    <div class="app">
        <li >{{date}}</li>
    </div>
</template>
<script>
export default {
    props:['date'],
    data () {
        return {
            
        }
    }
}

 

Original link: https://blog.csdn.net/weixin_38888773/java/article/details/81901831

 

3. The method of obtaining the parent component subassembly

Parent Form

<template>
  <div class="gl-wrap" id="box">
        <swiperTemp1 ref="temp1"></swiperTemp1>
  </div>
</template>
<script type="text/javascript">
  import swiperTemp1 from './swiper1.vue'
  export default {
    name: 'index',
    data () {
      return {}
    },
    methods: {
     
    },
    mounted(){
      this.$refs.temp1.test(123)

    },
    Components: { // template 
      swiperTemp1
    }
  }
</script>

Subassembly

<template>
</template>
<script>
 
  export default{
    data () {
      return {
      }
    },
    methods: {
      test (n) {
         alert(n)
      }
    },
    mounted(){
    }
  }
</script>