嗨,我在 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
不改变还是一样
那么我如何更改插槽并更改父组件
非常感谢..
最佳答案
您必须向槽公开一个方法来更新值。这意味着您将无法使用 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>
关于javascript - 更新slot vuejs中的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60650749/