Как распространить режим в составной компонент VueJS? - PullRequest
Новая
       11

Как распространить режим в составной компонент VueJS?

0 голосов
/ 18 ноября 2018

Vuetify имеет много опций для текстовое поле компонента. Моя идея состоит в том, чтобы создать пользовательский компонент текстовое поле с некоторыми предопределенными параметрами, такими как значок, квартира, прямоугольник и т. Д. Но я не хочу играть со свойством value и вводом событие в моем пользовательском компоненте. Есть ли способ, как распространить модель моего пользовательского текстового поля в текстовое поле Vuetify ?

Следующий код не работает, но я хотел бы иметь что-то похожее 

<template>
  <v-text-field flat v-model="value" ></v-text-field>
</template>
<script>
export default {
  props: ['value']
}
</script>

1 Ответ

0 голосов
/ 19 ноября 2018

Передайте реквизиты value до значения v-text-field, а emit событие ввода обратно в пользовательский text-field компонент @input. Тогда вы сможете использовать v-model для своего пользовательского text-field компонента: 

<template>
  <v-text-field flat :value="value" @input="$emit('input', $event)"></v-text-field>
</template>
<script>
export default {
  props: ['value']
}
</script>


Vue.component('app-text',{
  template: `<v-text-field flat :value="value" @input="$emit('input', $event)"></v-text-field>`,
  props: ['value']
})

new Vue({
  el: "#app",
  data: {
    value: 3
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.css">


<div id="app">
 <v-app>
  <v-layout column>
    <v-flex sm6 offset-sm3>
      <app-text v-model="value"></app-text>
      {{ value }}
    </v-flex>
  </v-layout>
</v-app>
</div>
...