前言

开发期间各个组件之间必定要互相交互传值，之前学习路由的时候介绍了几种传值方式，今天再详细的研究一下各个组件之间但不限于路由的传值Props。

一、props 选项式写法

props 需要使用 props 选项来定义：

export default {
  props: ['foo'],
  created() {
    // props 会暴露到 `this` 上
    console.log(this.foo)
  }
}

除了使用字符串数组来声明 prop 外，还可以使用对象的形式：

export default {
  props: {
    title: String,
    likes: Number
  }
}

二、props 组合式写法

<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

注意传递给 defineProps() 的参数和提供给 props 选项的值是相同的，两种声明方式背后其实使用的都是 prop 选项。

除了使用字符串数组来声明 prop 外，还可以使用对象的形式：

// 使用 <script setup>
defineProps({
  title: String,
  likes: Number
})

// 非 <script setup>
export default {
  props: {
    title: String,
    likes: Number
  }
}

如果你正在搭配 TypeScript 使用

<script setup lang="ts">
defineProps<{
  title?: string
  likes?: number
}>()
</script>

这种方式可以传递自定义类型。、，注意属性后面的问号代表可以传可以不传。

如我想接收菜单对象：

   interface NavigationItem{
      children: Array<Object>,
        id:string,
        name:string,
        path:string
    }

    const {navigationItem} = defineProps<{
      navigationItem :NavigationItem,
      hidden:boolean
    }>()

声明了属性之后就可以接收其他组件传递的值了：

<MyComponent title="hello" likes=10 />

<span>{{ title}}</span>
<span>{{ likes}}</span>

总结

简简单单入门的语法就介绍到这，明天再深入一下。

生活本来很不易，不必事事渴求别人的理解和认同，静静的过自己的生活。心若不动，风又奈何。你若不伤，岁月无恙。