w3h5

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 上,点此访问

声明:本文由w3h5原创,转载请注明出处:《Vue父子组件通信,props传参》 https://www.w3h5.com/post/468.html

赞 (0)
分享到: +More |

评论 沙发

换个身份