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>