Vue.js 如何像 React 中的 {...props} 一样在 Vue 中解构 props

发布于12月07日

在React中，我可以像这样分解props :

function MyComponent() {
  const myProp = {
    cx: '50%',
    cy: '50%',
    r: '45%',
    'stroke-width': '10%'
  }
  return ( 
    <svg>
      <circle {...myProp}> </circle>
    </svg>
  )
}

在Vue中，我该如何做同样的事情？我目前在VueJS中的详细版本如下:

<svg>
  <circle :cx="circle.cx" :cy="circle.cy" :r="circle.r" :stroke-width="circle.strokeWidth"> </circle>
</svg>

computed: {
  circle() {
    return {
      cx: '50%',
      cy: '50%',
      r: '45%',
      strokeWidth: '10%'
    }
  }
}

React:https://jsfiddle.net/as0p2hgw/中的可运行代码段

推荐答案

只需添加到CMS答案中，因为这对给定示例不起作用(完全)，因为"笔划宽度"没有正确传递(笔划宽度需要是烤肉串大小写).要使其发挥作用，需要:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <my-component></my-component>
</div>

<script>
  Vue.component('my-component', {
    template: `
      <svg>
        <circle v-bind="circle"> </circle>
      </svg>
    `,
    computed: {
      circle() {
        return {
          cx: '50%',
          cy: '50%',
          r: '45%',
          'stroke-width': '10%'
        }
      }
    }
  })

  new Vue({
    el: '#app'
  })
</script>