Vue: Basic usage of slots and case studies

1. The role of component slots

Insert picture description here
2. How to use the slot:

Insert picture description here
The role of the slot : reserve a slot for transferring small details: if there is a value in the slot and there is also a value in the parent template, the value in the slot will be overwritten

Case: (Analysis see notes)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <example-test :colorstyle="colorStyle">出现一个bug</example-test>
    </div>
    <script>
        //插槽的作用：父组件想子组件传递内容
        Vue.component('example-test', {
            props: ['colorstyle'],
            template: `
            <div>
                <strong :style="{color:colorstyle}">ERROR:</strong>
                <!--我利用props属性传递父组件模板的数据到子组件模板，实现动态更改style里面的值-->
                <slot></slot>
                <!--预留一个插槽用于传递数据 小细节：如果slot里面有值，且父级模板中也有值 slot里面的值会被覆盖-->
                </div>
            `,
        })
        var vm = new Vue({
            el: '#app',
            data: {
                colorStyle: 'red'
            },
        })
    </script>
</body>

</html>

operation result:
Insert picture description here

Mr.xiao~

Published 28 original articles · praised 7 · views 1182

Private letter concerns

Vue: Basic usage of slots and case studies

Guess you like