Vue父子组件通信，props传参

我们可能会遇到一些弹窗提示，样式是一样的，但是弹窗的内容不一样，可以使用 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 上，点此访问。