Vue3 - 小道具 - コードワールド

小道具

親コンポーネントによって渡された値を受け取るために使用されます

<script setup> を使用する単一ファイルコンポーネントでは、defineProps() マクロを使用して props を宣言できます。

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

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

<script setup> を使用しないコンポーネントでは、props オプションを使用して props を宣言できます (vue2 と同様)。

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

defineProps() に渡されるパラメータは props オプションに提供される値と同じであり、prop オプションは実際には 2 つの宣言メソッドの背後で使用されます。

文字列の配列を使用して 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
  }
}

詳細の概要:

すべての props はデフォルトではオプションであり、渡すかどうかを指定できます。必要な場合: true が宣言されている場合、プロパティを渡す必要があります。そうでない場合は、警告が発行されます。

ブール値以外に渡されないオプションのプロパティのデフォルト値は unknown になります。

ブール値データが渡されない場合、prop は false に変換されます。これは、デフォルトを設定することで変更できます。たとえば、default: unknown を設定すると、非ブール値データのデフォルト値と一致します。

プロップのいくつかの詳細を渡します。

プロップの名前が非常に長い場合は、キャメルケースの形式にする必要があり、渡すときにケバブケースで渡すことができます。

// 父组件
// 传递 烤肉串方式，为了和html attribute对齐
<MyComponent greeting-message="hello"/>

// 子组件
defineProps({
  greetingMessage: String // 通过小驼峰的方式接收
})

// 使用方面也是小驼峰的方式
<span>{
    
    { greetingMessage }}</span>

転送データには静的データと動的データの 2 種類があります。

いわゆる静的とは、データが直接無効であることを意味します。たとえば、

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

動的とは、最初に定義してから渡すことです

<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>

異なる値タイプの受け渡し

番号

<BlogPost :likes="42"/>

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

ブール値

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

配列

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

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

物体

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

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

1 つのオブジェクトを使用して複数のプロップをバインドする

// 定义
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
  }
})

単一ストリーム

props によって渡されるデータは読み取り専用で変更できません。変更しないと背景で警告が表示されます。

単一項目データフローの本来の目的は、親コンポーネントが更新されると、子コンポーネントの props も最新の値を取得し、変更できないことです。変更すると、警告が表示されます。

複雑なデータ型の場合は、警告なしに変更できますが、そうすることはお勧めできません。

これは実際には、複雑なデータ型のアドレスが変更されないというバグに悩まされています。可能ではありますが、パフォーマンスの損失も大きく、ゲインがゲインを上回ります。

Vue3 - 小道具

小道具

受信したプロパティのいくつかの検証方法

詳細の概要:

プロップのいくつかの詳細を渡します。

単一ストリーム

おすすめ