如何在 vuejs 中使用自定义输入组件？答案

【问题标题】：How to use custom input component in vuejs?如何在 vuejs 中使用自定义输入组件？
【发布时间】：2020-12-30 18:18:30
【问题描述】：

在使用 Bootstrap-Vue 作为 UI 框架时，我正在尝试制作一个自定义表单组件并在多个父组件中使用它。这是我的表单组件

<template>
  <b-form>
    <b-input-group>
      <b-form-input placeholder="Post Title"></b-form-input>
      <wysiwyg-input placeholder="Post Content" />
    </b-input-group>
  </b-form>
</template>

而父组件是

<FormFields :title="title" :content="content" />

如何从子组件访问父组件中的值。

注意：我也在使用 vue-quill 编辑器。

这里是codeandbox链接： https://codesandbox.io/s/mystifying-benz-w8wgu?file=/src/App.vue

提前致谢！

【问题讨论】：

标签： vue.js vuejs2 bootstrap-vue vue-quill-editor

【解决方案1】：

在您的子组件上定义一个prop，并在您在父组件中使用它时将数据传递给它：

// ChildComponent.vue
export default {
  props: {
    someData: {}
  }
}

// ParentComponent.vue
<template>
  <child-component :some-data="myData"></child-component>
</template>

<script>
export default {
  data() {
    return {
      myData: {...}
    }
  }
}
</script>

【讨论】：

此方法在控制台中显示以下消息。 “[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于 prop 值的数据或计算属性。Prop 正在改变”
您似乎正在改变子组件中的道具。尽量避免这种情况。否则，你必须使用.sync 修饰符见这个：vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
props 应该是不可变的 - 即“只读”。如果您出于某种原因需要更新值，请在子组件中创建 prop 数据的本地副本，或者 $emit 将更新后的值返回给父组件以更新 prop。