bak - daniel-qa/Vue GitHub Wiki

props

  • 範例

App.vue

<template>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'
</script>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
</template>

script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

这段代码是一个在 Vue 组件中使用子组件的示例，具体解释如下：

  1. <HelloWorld ... />

组件名：HelloWorld 是你定义的子组件，通常在父组件中引入并使用。

  1. msg="Welcome to Your Vue.js App"

属性（Prop）：这里通过 msg 属性向 HelloWorld 组件传递了一个字符串 "Welcome to Your Vue.js App"。这个字符串可以在 HelloWorld 组件内使用。

类型：在 HelloWorld 组件中，你需要定义 props 以接收这个值。

在 Vue 中，參數的 mapping 通常是指如何將父組件傳遞的 props 對應到子組件的資料或方法。這個過程可以通過以下步驟來完成：

1. 在父組件中傳遞 props

在父組件中，使用 v-bind 或 : 將資料傳遞給子組件。例如：

<template>
  <child-component :user="userData"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      userData: {
        name: 'John Doe',
        age: 30
      }
    };
  }
};
</script>

2. 在子組件中定義 props

在子組件中，使用 props 選項來定義接收的參數。例如：

<template>
  <div>
    <h1>{{ user.name }}</h1>
    <p>Age: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      required: true
    }
  }
};
</script>

3. 使用接收的 props

在子組件的模板中，可以直接使用接收到的 props 進行渲染。

⚠️ **GitHub.com Fallback** ⚠️