Vue学习：15-组件之数据传递（父传子）

如果父组件向子组件进行传递数据，那么我们需要在子组件中声明props来接收传递数据的属性，可采用字符串数组式或对象式来声明props。

父组件向子组件传递数据，在使用组件的标签上采用属性方式传递的props值，可使用v-bind:或:来绑定属性。

组件中props中的数据是只读的，不可直接更改，只能通过父组件进行更改。

声明与使用：

1、在选项式 API 中

a. 我们可以提供props选项来声明接收传递的数据

b. 在JS中可使用this.$props来访问声明的自定义的属性

c. 在视图模板中，可直接访问props中声明的自定义属性

2、在组合式 API 中

a. 我们可以采用defineProps宏来声明接收传递的数据

b. 在JS中可使用defineProps返回的对象来访问声明的自定义的属性

c. 在视图模板中，可直接访问defineProps中声明的自定义属性

一、字符串数组的形式

实例：

MyButton.vue

<script setup>
  //声明接收父组件传递的属性值：自定义属性
  let propsData = defineProps(['title','error','flat'])

  function showPropsData() {
    //在JS中，需要通过defineProps返回对象来访问props的内容
    console.log(propsData)
    console.log(propsData.title)
    console.log(propsData.error)
    console.log(propsData.flat)
  }
  
  function changeErrorProps() {
    //不能直接修改props的数据，因为是只读的
    propsData.error = !propsData.error
  }
</script>

<template>
  <!-- 在视图模板上，可以直接使用props中的属性 -->
  <button :class="{error,flat}" @click="showPropsData" @mousedown.right="changeErrorProps">
    {{ title }}
  </button>
</template>

<style>
  button {
    border: none;
    padding: 12px 25px;
  }

  .error {
    background-color: rgb(197,75,75);
    color: white;
  }

  .flat {
    box-shadow: 0 0 10px grey;
  }
</style>

App.vue

<script setup>
  import {ref} from 'vue'
  import MyButton from './components/MyButton.vue'

  let isError = ref(false)
  let isFlat = ref(false)
  let btnText = ref('普通按钮')

</script>

<!-- 视图区域（view） -->
<template>
  主题：<input type="checkbox" v-model="isError">
  阴影：<input type="checkbox" v-model="isFlat">
  按钮文本：<input type="text" v-model="btnText">
  <hr>
  <!-- 父向子传值，可采用属性的方式赋值 -->
  <MyButton :title="btnText" :error="isError" :flat="isFlat"/>
</template>

<style>
  
</style>

main.js

// import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'


const app = createApp(App)

app.mount('#app')

二、对象的形式

对象形式声明的props，可以对传来的值进行校验，如果传入的值不满足类型要求，会在浏览器控制台中抛出警告来提醒使用者。

对象形式声明的props，key是prop的名称，值则为约束的条件。

对象中的属性：

type：类型，如String、Number、Boolean、Array、Object、Date、Function、Symbol

default：默认值；对象或者数组应当用工厂函数返回

required：是否必填，布尔值

validator：自定义校验，函数类型

修改上面的实例：

MyButton.vue

<script setup>
  //声明接收父组件传递的属性值：自定义属性
  let propsData = defineProps({
    title: {
      type: String,
      required: true
    },
    error: Boolean,
    flat: Boolean    
  })

  function showPropsData() {
    //在JS中，需要通过defineProps返回对象来访问props的内容
    console.log(propsData)
    console.log(propsData.title)
    console.log(propsData.error)
    console.log(propsData.flat)
  }
  
  function changeErrorProps() {
    //不能直接修改props的数据，因为是只读的
    propsData.error = !propsData.error
  }
</script>

<template>
  <!-- 在视图模板上，可以直接使用props中的属性 -->
  <button :title="title" :class="{error,flat}" @click="showPropsData" @mousedown.right="changeErrorProps">
    {{ title }}
  </button>
</template>

<style>
  button {
    border: none;
    padding: 12px 25px;
  }

  .error {
    background-color: rgb(197,75,75);
    color: white;
  }

  .flat {
    box-shadow: 0 0 10px grey;
  }
</style>