Vue.js
Пользовательские компоненты с v-образной моделью

CSS firebase HTML JavaScript jQuery Laravel Node.js PHP twitter-bootstrap TypeScript

Вступление

Часто нам приходится создавать некоторые компоненты, которые выполняют некоторые действия / операции с данными, и мы требуем этого в родительском компоненте. В большинстве случаев vuex будет лучшим решением, но в тех случаях, когда поведение дочернего компонента не имеет ничего общего с состоянием приложения, например: слайдер диапазона, выбор даты / времени, программа чтения файлов

Наличие отдельных магазинов для каждого компонента каждый раз, когда они используются, усложняется.

замечания

Чтобы иметь v-model на компоненте, вам нужно выполнить два условия.

Он должен иметь прозвище с именем 'value'
Он должен излучать input событие со значением, ожидаемым родительскими компонентами.

<component v-model='something'></component>

это просто синтаксический сахар для

<component
    :value="something"
    @input="something = $event.target.value"
>
</component>

v-модель на счетчике

Здесь counter - дочерний компонент, к которому обращается demo являющаяся родительским компонентом с использованием v-model .

// child component
Vue.component('counter', {
  template: `<div><button @click='add'>+1</button>
  <button @click='sub'>-1</button>
  <div>this is inside the child component: {{ result }}</div></div>`,
  data () {
    return {
      result: 0
    }
  },
  props: ['value'],
  methods: {
    emitResult () {
      this.$emit('input', this.result)
    },
    add () {
      this.result += 1
      this.emitResult()
    },
    sub () {
      this.result -= 1
      this.emitResult()
    }
  }  
})

Этот дочерний компонент будет выдавать result каждый раз, когда вызываются методы sub() или add() .

// parent component
new Vue({
  el: '#demo',
  data () {
    return {
      resultFromChild: null
    }
  }
})

// parent template
<div id='demo'>
  <counter v-model='resultFromChild'></counter>
  This is in parent component {{ resultFromChild }}
</div>

Так как v-model присутствует на компоненте ребенка, опора с именем value был послан в то же время, является входным событием на counter , который , в свою очередь обеспечивают значение от компонента ребенка.

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow