Props - daniel-qa/Vue GitHub Wiki

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

  • 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** ⚠️