更新slot vuejs中的数据

Question

你好，我在 laravel 项目中使用 vuejs，这是我的 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
  }
}

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

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