VueJS作用域插槽和数据操作
VueJS作用域插槽和数据操作
提问于 2020-01-24 21:55:55
我有一个vuejs组件edit-form，里面有一个命名的插槽body和一个名为model的数据。
<template>
<div>
<pre>{{ model }}</pre>
Name: <input v-model="model.name"><br>
<slot name="body" v-bind="model"></slot>
</div>
</template>
<script>
export default {
data: function() {
return {
model: {
name: "x",
title: "y"
}
}
}
}
</script>我在一个父组件中使用这个组件，如下所示：
<edit-form>
<template v-slot:body="model">
Title: <input v-model="model.title">
</template>
</edit-form>现在，当我在name输入字段中输入内容时，<pre>{{ model }}</pre>标记就会更新。修改title输入字段对<pre>没有影响。
请参阅https://codepen.io/bernhardh/pen/KKwEVZo
如何让title输入域正常工作？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-24 22:12:47
你应该在这段代码中做一些修改！例如
Html代码：
<html>
<head></head>
<body>
<div id="container">
<edit-form v-model="model">
<template slot="body">
Title: <input v-model="model.title">
</template>
</edit-form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>Vuejs代码：
Vue.component('edit-form', {
template : `<div>
<pre>{{ value }}</pre>
Name: <input v-model="value.name"><br>
<slot name="body"></slot>
</div>`,
props:{
value: {
reqired: false,
type: Object
}
},
data: function() {
return {
};
}
});
new Vue({
el: '#container',
data: {
value: '',
model: {
name: "x",
title: "y"
}
},
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59897873
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号