[Vuejs]-I am failing when I try to use scoped slots in Vue.js

by

0👍

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.

👤Stefan Urbansky

0👍

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

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

👤Chris Jeffries

Leave a comment