1、子元件通過

import Children from './children.vue'引入在父元件
在父元件通過

 // 引入子元件
  components:{
      children: Children
  }註冊子元件
通過標籤的形式來使用

<children :msg="msg" @say="parentSay"></children>
父元件程式碼

<template>
  <div class="parent">
    我是父元件
    <!--父元件監聽子元件觸發的say方法，呼叫自己的parentSay方法-->
    <!--通過:msg將父元件的資料傳遞給子元件-->
    <children :msg="
 
msg" @say="parentSay"></children>
  </div>
</template>

<script>

import Children from './children.vue'

export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },

  methods: {
      // 引數就是子元件傳遞出來的資料
      parentSay(msg){
          console.log(msg) // hello, parent
 

      }
  },

  // 引入子元件
  components:{
      children: Children
  }
}
</script>

子元件程式碼

<template>
  <div class="hello">
    <div class="children" @click="say">
      我是子元件
      <div>
        父元件對我說：{{msg}}
      </div>
    </div>

  </div>
</template>

<script>

  export 
 
default {
      //父元件通過props屬性傳遞進來的資料
      props: {
          msg: {
              type: String,
              default: () => {
                  return ''
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },

      methods: {
          // 子元件通過emit方法觸發父元件中定義好的函式，從而將子元件中的資料傳遞給父元件
          say(){
              this.$emit('say' , this.childrenSay);
          }
      }
  }
</script>

效果