Props - daniel-qa/Vue GitHub Wiki

Props

https://www.runoob.com/vue3/vue3-syntax.html

在 Vue 中，props 是用來傳遞數據從父組件到子組件的，這是單向數據流（parent → child）。因此，子組件無法直接修改 props 的值。

如果子組件想要改變父組件中的變數，傳統做法是通過 $emit 發送事件給父組件，然後由父組件來修改數據。

在 setup script 中，props 是唯讀的，你不能直接修改 props 中的值。

可以通過 v-model 和 update 事件，實現更簡單的 雙向綁定，讓子組件可以 "間接" 修改父組件的數據，避免了過多的事件傳遞和額外的複雜邏輯。

子組件調用父函式

子組件調用父變數

父組件向子組件傳遞 Ref 變數並反應數值變化

子組件改變父組件ref變數的方法

  • 範例
<SchoolPicker :filteredSubItems="filteredSubItems123" />

前面是父組件中的變數名稱，後面是父組件傳過去的名稱

子組件中對 filteredSubItems 的引用不會受到父組件使用的變數名稱（如 filteredSubItems123）的影響，因為 Vue 自動處理了名稱映射。

==> 所以還是要用原本父組件的變數名稱。

在子組件中的宣告，是必需的，而且名稱要用原本的變數名稱

props: {
  filteredSubItems: {
    type: Array,
    required: true
  }
}
  • Props

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

Prop 实例

<div id="app">
  <site-name title="Google"></site-name>
  <site-name title="Runoob"></site-name>
  <site-name title="Taobao"></site-name>
</div>
 
<script>
const app = Vue.createApp({})
 
app.component('site-name', {
  props: ['title'],
  template: `<h4>{{ title }}</h4>`
})
 
app.mount('#app')
</script>

注意：template 中 ` 是反引号，不是单单引号 '。

  • 事件

emit 的作用 就是子組件的 function 呼叫父組件的 function

子组件通过 $emit 触发事件，父组件可以监听这些事件。

实例

<div id="app">
  <button-counter @increment="incrementTotal"></button-counter>
  <p>Total clicks: {{ total }}</p>
</div>

<script>
  const app = createApp({
    data() {
      return {
        total: 0
      };
    },
    methods: {
      incrementTotal() {
        this.total++;
      }
    }
  });

  app.component('button-counter', {
    template: '<button @click="increment">You clicked me {{ count }} times.</button>',
    data() {
      return {
        count: 0
      };
    },
    methods: {
      increment() {
        this.count++;
        this.$emit('increment');
      }
    }
  });

  app.mount('#app');
</script>
  • const { createApp } = Vue;

使用 Vue.createApp，行数不变，但稍显冗长。

使用"解构赋值"： 解构赋值占用一行，但后续调用更简洁。

destructuring assignment

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