Vue3.0 組件傳值——props

Vue組件傳值——props

父組件

<template>
  <div>
    <Son :sonData="dadData"></Son>  //綁定數據：子數據 = 父數據
  </div>
</template>

<script>
import { ref,reactive } from '@vue/composition-api'
import Son from './Components/Item.vue'  //引入子組件

export default{
  name: 'dad',
  setup(props,{refs,root}){
    const dadData = reactive({  //父數據
      name: 'muller',
      showOK: () => {console.log("OK")}  //函數也可以一起傳
    })
    return {
      dadData
    }
  },
  components: {  //注冊子組件
    Son
  }
}
</script>

子組件

<template>
  <div>
    {{sonData}}  //直接調用
  </div>
</template>

<script>
import { ref,reactive } from '@vue/composition-api'

export default{
  name: 'son',
  setup(props,{refs,root}){
    const showData = () => {
      props.sonData.showOK()
      console.log(props.sonData.name)  //JS里的調用
    }
  },
  props: {  //指定接收的值，必須指定類型
    sonData: {
      type:Object
    }
  }
}
</script>