Vue父子組件通訊，props傳參

• 2020 年 1 月 8 日
• 筆記

我們可能會遇到一些彈窗提示，樣式是一樣的，但是彈窗的內容不一樣，可以使用 Vue 的 props 傳值來實現。

HTML：

<div id="App">    <user username="www.w3h5.com"></user>  </div>

JS：

<script>    Vue.component('user', {      template: `<div @click="onClick">我的網站</div>`,      props: ['username'], //傳的值,這裡的 username 與父元素標籤的屬性對應      methods: {        onClick() {//點擊,彈出 props 穿過來的 username 的值          alert(this.username)        },      },    })    new Vue({      el: "#App",    });  </script>

這裡封裝了一個 user 組件，通過 props 中的 username 傳值，注意這裡的 props 中的 username 與父級組件中 user 標籤中的 username 屬性是對應的。

我把這個小案例放在了我的 GitHub 上，點此訪問。

聲明：本文由w3h5原創，轉載請註明出處：《Vue父子組件通訊，props傳參》 https://www.w3h5.com/post/468.html

本文已加入 騰訊雲自媒體分享計劃 (點擊加入)