vue父传子通过对象的形式简写

最新推荐文章于 2024-05-29 18:55:00 发布

不忘初心ing

最新推荐文章于 2024-05-29 18:55:00 发布

阅读量976

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/baogeprh/article/details/114011090

版权

今天刚看到父传子传对象形式的简写方式，给大家分享一下。话不多说上代码

  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return {
        options:{
          a:123,
          b:456,
          c:789
        }
      }
    },
    template:`
    <div>
      <dome v-bind="options" />
    </div>
    `
  });
  app.component('dome',{
    props:['a','b','c'],
    template:`
    <div>
      {{a}}--{{b}}--{{c}}
    </div>
    `
  })
  app.mount('#root')
</script>
</html>

解释一下：之前如果传递内容都是一个一个传递的，如果数据过多时，可以通过对象的形式传递，直接在子组件上面v-bind等于相应的父组件即可。得到的是对象里面所有的值。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不忘初心ing

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue父传子通过对象的形式简写

今天刚看到父传子传对象形式的简写方式，给大家分享一下。话不多说上代码 <script src="https://unpkg.com/vue@next"></script></head><body> <div id="root"></div></body><script> const app = Vue.createApp({ data() { return {
复制链接

扫一扫