обновить данные в слоте vuejs

Question

привет, я использую vuejs с laravel проектом, и это мой vuejs код

Vue.component('search_and_select',{
    template:
    '<div>'+
        '<slot :test_text="test_text"></slot>'+
    '</div>',
    data:function(){
        return {
            test_text:"test text",
        }
    },
    methods:{

    },
    props:{

    },
});
new Vue({
    el:'.user_search_and_select',
    data:{

    },
});

, и это мой html код

<div is='search_and_select'>
    <div  slot-scope="{test_text}">
        @{{test_text}}
        <input type='text' v-model='test_text' />
    </div>
</div>

до сих пор все работает так хорошо, но если я пользуюсь ключом <input type='text' v-model='test_text' />, то test_text не изменится так же, как я могу изменить слот и родительский компонент тоже, спасибо большое ..

Answer 1

Вы должны выставить метод в слот для обновления значения. Это означает, что вы не сможете использовать v-model, потому что теперь вам нужно обрабатывать :value и @input отдельно.

<slot :test_text="test_text" :update_test_text="update_test_text"></slot>

methods: {
  update_test_text(value) {
    this.test_text = value
  }
}

Теперь вы можете использовать компонент следующим образом:

<search_and_select>
  <div slot-scope="{ test_text, update_test_text }">
    <input
      type="text"
      :value="test_text"
      @input="update_test_text($event.target.value)"
    >
  </div>
</search_and_select>