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

本文已加入 腾讯云自媒体分享计划 (点击加入)