如何将 vue 单个组件模板部分拆分为更小的子模板

Question

我的应用程序是在 vuejs 上构建的@2 有多种形式，大多数共享相同的 html 模板，带有添加和重置按钮。与相同的方法一样，resetForm 使 "item" 属性无效并重置表单，create 方法将项目发送到后端。

<div class="row">
    <div class="action">
        <button class="btn btn-white" @click="create()">&#9998; Add</button>
        <button class="btn btn-white" @click="resetForm()">&#x274C; Reset</button>
    </div>
</div>

我可以通过 mixins 与每个组件共享方法，但我不能以相同的方式共享 "template partial"。你如何处理这种情况？

我尝试创建组件 create-reset-buttons，但我无法触发父方法，因为每个组件都封装了它的功能并且不允许修改子组件的道具。需要完成哪些操作才能重置父表单。

Answer 1

组件不允许修改道具，但是有ways child can communicate to parent as explained 详细

In Vue.js, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events. Let’s see how they work next.

How to pass props

以下是将道具传递给智利元素的代码：

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

How to emit event

HTML:

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

JS：

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

如何将 vue 单个组件模板部分拆分为更小的子模板

How split vue single components template section in to smaller subtemplates

vue.js

vue-component

vuejs2

How to pass props

How to emit event