vue父组件向子组件传值，父组件调用子组件的方法

父组件向子组件传值：
子组件child.vue：

<template>
    <div>{
   
   {msg}}</div>
</template>

<script>
  export default {
    name: 'child',
    props: {
      msg: String, //或者props:["msg"]
    },
  }
</script>

父组件：

<template>
    <div>
        <child :msg="parentMsg"></child>
    </div>
</template>
<script>
    import child from './child' //引入child组件
    export default {
        data() {
            return {
                parentMsg: '我是父组件传给子组件的值'
            }
        },
        components: {
            child
        }
    }
</script>

父组件调用子组件的方法
子组件child.vue：

script>
      export default {
        data(){
          return {      
          }
        },
        methods:{
          childMethod() {
            console.log('我是子组件方法输出的值')
          }
        }
      }
    </script>

父组件：

<template>
  <div>
    <children ref="childCom"></children>
    <Button @click="handleChild"></Button>
  </div>
</template>
 
<script>
  import child from 'child.vue'
  export default {
    components: {      
      child 
    },
    methods:{
      handleChild() {     
        this.$refs.childCom.childMethod(); 
      }
    }
  }
</script>