Vue3 - props

props

• Used to receive the value passed by the parent component

• In single-file components using <script setup>, props can be declared using the defineProps() macro:

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

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

• In components that do not use <script setup>, props can be declared using the props option (consistent with vue2):

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

• The parameters passed to defineProps() are the same as the values ​​provided to the props option, and the prop option is actually used behind the two declaration methods.

• In addition to using an array of strings to declare props, you can also use the form of objects, as follows:

Several verification methods for incoming props

// 使用 <script setup>
defineProps({
  title: String, // 属性名: 其对应的数据类型
  likes: Number,
  
  propB: [String, Number], // propB可以是字符串或者数字类型的一种
    
  propC: { // 更加详细的定义
    type: String, // 类型
    required: true// 是否必传
  },
    
  // Number 类型的默认值
  propD: {
    type: Number, // 类型
    default: 100// 指定默认值
  },
    
  // 对象类型的默认值
  propE: {
    type: Object, // 类型
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default(rawProps) {
      return { message: 'hello' } // 对象默认值
    }
  },
    
  // 函数类型的默认值
  propG: {
    type: Function, // 类型
    // 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数
    default() { // 这个直接就是一个默认函数
      return'Default function'
    }
  }
})

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

Summary of details:

1. All props are optional by default, and can be passed or not. If required: true is declared, the property must be passed, otherwise a warning will be issued

2. Optional props not passed other than Boolean will have a default value of undefined.

3. When Boolean data is not passed, prop will be converted to false, which can be changed by setting default for it, for example, setting default: undefined is consistent with the default value of non-Boolean data

Pass a few details of the prop:

1. If the name of the prop is very long, it should be in the form of camelCase, and can be passed in kebab-case when passing

// 父组件
// 传递 烤肉串方式，为了和html attribute对齐
<MyComponent greeting-message="hello"/>
​
// 子组件
defineProps({
  greetingMessage: String // 通过小驼峰的方式接收
})
​
// 使用方面也是小驼峰的方式
<span>{
    
    { greetingMessage }}</span>

2. There are two types of transfer data, static and dynamic

• The so-called static means that the data is directly dead, for example

<component-one title="爱你孤身走暗巷"></component-one> // 直接传递一个字符串

• Dynamic is to define first and then pass

<component-one :title="title"></component-one> // 通过v-bind或者:动态绑定
​
<script setup>
import ComponentOne from '../src/components/zujianup/ComponentOne.vue'
import { ref } from'vue'
    
const title=ref('123')
</script>

3. Passing of different value types

• Number

<BlogPost :likes="42"/>

<BlogPost :likes="post.likes"/>

• Boolean

<BlogPost is-published/> // 如果传递的数据是true时，可以直接写传递的属性名即可
<BlogPost :is-published="false"/> // 传递的false需要书写完整
<BlogPost :is-published="post.isPublished"/> // 传递已经定义的值

• Array

<BlogPost :comment-ids="[234, 266, 273]"/> // 直接传递一个数组

<BlogPost :comment-ids="post.commentIds"/> // 传递一个存在的数组

• Object

// 和数组类似，不多做解释了
<BlogPost
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
/>

<!-- 根据一个变量的值动态传入 -->
<BlogPost :author="post.author"/>

• Use one object to bind multiple props

// 定义
const post = {
  id: 1,
  title: 'My Journey with Vue'
}

// 传递
<component-one v-bind="post"></component-one> // 直接v-bind传递
// 相当于
<component-one :id="post.id" :title="post.title"></component-one>

// 子组件接收 -- 分开声明，不能直接定义一个post: Oject
const props = defineProps({
  id: Number,
  title: {
    type: String,
    required: true
  }
})

single stream

• The data passed by props is read-only and cannot be modified, otherwise the background will warn

• The original intention of the single-item data flow is that when the parent component is updated, the props of the child component will also get the latest value and cannot be modified. If you change it, you will be warned

• For complex data types, although it can be changed without warning, it is not recommended to do so

• This is actually stuck with the bug that the address of complex data types does not change. Although it is possible, it also has a lot of performance loss, and the gain outweighs the gain