Vue.js: связать два компонента через v-model

@Yakym · Регистрация: 04.03.2015

Author24 — интернет-сервис помощи студентам

Здравствуйте!
Нужна помощь!
Есть 2 компонента, один:

Javascript

<template>
    <div>
        <label for="" v-show="isShowed">{{ label }}</label>
        <input :type="type" @focus="showLabel" @blur="hideLabel" :placeholder="placeHolder" class="text-inputs" />
    </div>   
</template>
 
<script>
   export default {
    data: function() {
        return {
            isShowed: false,
            value: ''
        }
    },
    props: ['placeHolder', 'label', 'type'],
    methods: {
        showLabel: function(){
            this.isShowed = true;
        },
        hideLabel: function(e){
            if(e.target.value === '') {
                this.isShowed = false;
            }
        }
    }
}; 
</script>

И второй, который я скачал(v-autocomplete).

Так вот, и тот и другой создают инпуты, мне нужно как-то через v-model передать значение из моего <input-field> в <v-autocomplete>, но никак не пойму как. Буду очень благодарен за помощь!

@M83 · 24.10.2017, 00:04

Можно в принципе помещать данные в $root и использовать его как шину обмена данными, либо прибегнуть к использованию эмиттеров.

В первом случае модель поля ввода текста будет связана с реактивным параметром непосредственно из корня экземпляра Vue, благодаря чему к нему можно будет обратиться из любого компонента. Либо же Эмиттеры. Их использование очень неплохо описано в официальной документации.

@Zuzik · 25.10.2017, 22:43

1) А разве нельзя сделать в своем компоненте параметр для v-model, и потом при использовании обоих компонентов в v-model в обоих компонентах указывать одну и ту же переменную?
2) А вы уверены, что вам нужно делать, то что вы хотите? Потому как смысла в ваших действиях я найти не могу.

@Hastin · 08.11.2017, 17:10

Zuzik, Совершенно верно, можно использовать одну переменную, хотя, я тут даже v-model не вижу

@M83 1 / 1 / 2 Регистрация: 23.10.2017 Сообщений: 8
	24.10.2017, 00:04	2
	Можно в принципе помещать данные в $root и использовать его как шину обмена данными, либо прибегнуть к использованию эмиттеров. В первом случае модель поля ввода текста будет связана с реактивным параметром непосредственно из корня экземпляра Vue, благодаря чему к нему можно будет обратиться из любого компонента. Либо же Эмиттеры. Их использование очень неплохо описано в официальной документации. 0

@Zuzik 298 / 256 / 57 Регистрация: 11.06.2012 Сообщений: 1,557
	25.10.2017, 22:43	3
	1) А разве нельзя сделать в своем компоненте параметр для v-model, и потом при использовании обоих компонентов в v-model в обоих компонентах указывать одну и ту же переменную? 2) А вы уверены, что вам нужно делать, то что вы хотите? Потому как смысла в ваших действиях я найти не могу. 0

@Hastin 40 / 32 / 7 Регистрация: 24.03.2016 Сообщений: 270
	08.11.2017, 17:10	4
	Zuzik, Совершенно верно, можно использовать одну переменную, хотя, я тут даже v-model не вижу 0