更新插槽vuejs中的数据

本文介绍了更新插槽vuejs中的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在Laravel项目中使用vuejs这是我的vuejs代码

hi im using vuejs with laravel project and this is my vuejs code

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键不变所以我该如何更改插槽并更改父组件非常感谢..

till now everything working so good but if i keyup <input type='text' v-model='test_text' /> the test_text dont change still the same so how can i change in slot and change in parent component too thanks a lot ..

推荐答案

您必须在插槽中公开用于更新值的方法.这意味着您将无法使用v-model，因为您现在需要分别处理:value和@input.

You have to expose a method to the slot for updating the value. This means you won't be able to use v-model because you will need to handle :value and @input separately now.

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

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

现在您可以像这样使用组件:

Now you can use the component like this:

<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>

这篇关于更新插槽vuejs中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Vuejs