尝试在Vue.js中使用作用域插槽时失败
尝试在Vue.js中使用作用域插槽时失败
提问于 2018-09-07 17:00:58
我已经阅读了所有的教程，vue.js手册和看过的视频教程，但我仍然不能让范围老虎机为我工作。下面是我测试过的最小代码。我显然漏掉了什么，但是什么。谁能理解这一点的人告诉我，我需要如何更改这段代码，使其工作。最终，我希望能够在内部插槽中引用(通过ajax)收集的数据-最终，这将是另一个组件。
<!DOCTYPE HTML>
<html>
<head>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'>
</script>
<script>
"use strict"
window.addEventListener('load', function () {
Vue.component('comp-onent', {
data:function () {
return {dataitem:"from the 'test' component instance"}
},
template:`
<dl>
<dt>From inside the 'test' component</dt>
<dd>{{dataitem}}</dd>
<dt>Rendered from the slot</dt>
<dd><slot :dataitem="dataitem"></slot></dd>
</dl>
`
});
let vm = new Vue({
el:'#vue-root',
data:{dataitem:"from the root Vue instance"}
});
});
</script>
</head>
<body>
<div id='vue-root'>
<comp-onent "slot-scope"="fromcomponent">
<p>Inside 'test' invocation</p>
<dl>
<dt>From root instance: </dt><dd>{{dataitem}}</dd>
<dt>From 'test' component instance:</dt><dd>{{fromcomponent.dataitem}}</dd>
</dl>
</comp-onent>
<dl><dt>Outside of 'test' invocation</dt><dd>{{dataitem}}</dd></dl>
</div>
</body>
</html>我考虑触发一个事件来将数据向上传递到根Vue实例，但如果我有多个实例，则此操作将失败，因此在本例中它不是一个解决方案。
回答 2
Stack Overflow用户
发布于 2018-09-07 19:07:03
我建议从一个没有插槽的简单工作示例开始。试试这个，玩一玩：
<!DOCTYPE HTML>
<html>
<head>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'>
</script>
<script>
"use strict"
window.addEventListener('load', function () {
Vue.component('comp-onent', {
props: {
dataitem:{
default: "from the 'test' component instance"
}
},
template:`
<dl>
<dt>From inside the 'test' component</dt>
<dd>{{dataitem}}</dd>
</dl>
`
});
let vm = new Vue({
el:'#vue-root',
data:{dataitem:"from the root Vue instance"}
});
});
</script>
</head>
<body>
<div id='vue-root'>
<comp-onent dataitem="something else"></comp-onent>
<comp-onent :dataitem="dataitem"></comp-onent>
</div>
</body>
</html>
然后在另一个步骤中尝试插槽。
Stack Overflow用户
发布于 2018-09-11 10:23:15
多亏了jsfiddle，我终于找到了阻止它工作的原因：https://jsfiddle.net/dronowar/uyvmtmrt/插槽作用域必须定义在组件调用内部的元素上，而不是组件本身上，所以
<comp-onent slot-scope="comp">
<p :class="comp.compclass">something</p>
</comp-onent>不起作用，但是
<comp-onent >
<div slot-scope="comp">
<p :class="comp.compclass">something</p>
</div>
</comp-onent>确实行得通。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52219033
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号