[英]I am failing when I try to use scoped slots in Vue.js
I have read every tutorial, the vue.js manual and watched video tutorials, but I still can't make scoped-slots work for me. 我已经阅读了所有教程,vue.js手册并观看了视频教程,但仍然无法使作用域插槽对我有用。 Below is the minimal code I have been testing with.
下面是我一直在测试的最少代码。 I am clearly missing something, but what.
我显然错过了一些东西,但是。 Can somebody who understands this tell me how i need to change this code so it works.
能够理解这一点的人可以告诉我如何更改此代码才能起作用。 Ultimately, I want to be able to reference data collected by the (via ajax) in the inner slot - which ultimately, will be another component.
最终,我希望能够引用(通过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>
I considered firing an event to pass the data up to the root Vue instance, but this fails if I have more than one <comp-onent>, so it is not a solution in this case. 我考虑触发事件以将数据传递到根Vue实例,但是如果我有多个<comp-onent>,则此操作将失败,因此在这种情况下不是解决方案。
I would suggest to start with a simple working example without slots. 我建议从一个没有槽的简单工作示例开始。 Try this and play:
试试这个玩:
<!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>
And try the slots in another step. 并在另一步骤中尝试插槽。
I finally tracked down what stops it from working thanks to this jsfiddle: https://jsfiddle.net/dronowar/uyvmtmrt/ slot-scope has to be defined on an element INSIDE the component invocation, not on the component itself, so 由于有了这个jsfiddle,我终于找到了阻止它运行的原因: https ://jsfiddle.net/dronowar/uyvmtmrt/ slot-scope必须在组件调用内的元素上定义,而不是在组件本身上定义,因此
<comp-onent slot-scope="comp">
<p :class="comp.compclass">something</p>
</comp-onent>
DOESN'T WORK BUT 不起作用
<comp-onent >
<div slot-scope="comp">
<p :class="comp.compclass">something</p>
</div>
</comp-onent>
does work. 确实有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.