Question

我已经阅读了所有教程，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实例，但是如果我有多个，则此操作将失败，因此在这种情况下不是解决方案。

Answer 1

我建议从一个没有插槽的简单工作示例开始。试试这个玩：

<!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>

然后尝试在其他位置插入插槽。

Answer 2

由于有了这个jsfiddle，我终于找到了阻止它运行的原因： https://jsfiddle.net/dronowar/uyvmtmrt/ slot-scope必须在组件调用内的元素上定义，而不是在组件本身上定义，所以

<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>

起作用。

当我尝试在Vue.js中使用作用域插槽时失败

2 个答案: