本文介绍了更新插槽 vuejs 中的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在 laravel 项目中使用 vuejs这是我的 vuejs 代码
Vue.component('search_and_select',{模板:''+'方法:{更新测试文本(值){this.test_text = 值}}
现在你可以像这样使用组件:
<div slot-scope="{ test_text, update_test_text }"><输入类型=文本":value="test_text"@input="update_test_text($event.target.value)">
</search_and_select>
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:{
},
});
and this is my html code
<div is='search_and_select'>
<div slot-scope="{test_text}">
@{{test_text}}
<input type='text' v-model='test_text' />
</div>
</div>
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 ..
解决方案
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 中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！