vue组件间传值规范问题

  • Z时代
  • 2024-03-13
  • 分类：IT

vue组件间传值规范问题

// Father.vue
<child :query="query" />
data() {
  return {
    query: {
      keyword: ''
    }
  }
}
// Child.vue
<input v-model="query.keyword" />
props: ['query']

像上面这样子组件直接使用父组件对象的属性，

// Child.vue
<child ref="child" />
// Father.vue
this.$refs.child.query

还是说通过refs去拿值，子组件不应该修改父组件的内容。这之间有明确的规范吗

回答：

你现在是父组件修改子组件的值吧。

你这种用法并不是没有，但是前提是这对父子组件是强耦合的，更理想的情况是子组件是一个内部组件，不对外暴露的，仅提供父组件使用，在这种场景下这样的用法并无大碍，只要你的使用都是受控的（即你明确的知道各种操作会发生什么）你完全可以这样用（当然你还可以使用 provide/inject）。

回答：

建议是不要在子组件里去修改父组件的data,可以算是规范吧，这个在官方文档中也有提及：
https://cn.vuejs.org/v2/guide...

如果你想修改父组件的data，也就是子组件的prop,最好还是显式的通知父组件更新，有比较简便的方式来实现这一需求
https://cn.vuejs.org/v2/guide...

回答：

没什么问题，性能还更好，但是要写好文档，不写文档会被打

以上是 vue组件间传值规范问题 的全部内容， 来源链接： utcz.com/p/937539.html

回到顶部