首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue父子组件通信,props传参

Vue父子组件通信,props传参

作者头像
德顺
发布2020-01-08 10:25:51
8160
发布2020-01-08 10:25:51
举报
文章被收录于专栏:前端资源前端资源

我们可能会遇到一些弹窗提示,样式是一样的,但是弹窗的内容不一样,可以使用 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://cloud.tencent.com/developer/article/1567565

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档