vue组件之间传值、父组件获取子组件的方法

<template>
    <div class="app">
       <input @click="sendMsg" type="button" value="给父组件传递值">
    </div>
</template>
<script>
export default {
 
    data () {
        return {
            msg: "我是子组件的msg",
        }
    },
     methods:{
         sendMsg(){
             //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
             this.$emit(‘func‘,this.msg)
         }
     }
}
</script>

<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>

<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, 添加到父组件的components中
    }
}
</script>

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

<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: {//模板
      swiperTemp1
    }
  }
</script>

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