组件作用域

  • 1.就是父组件与子组件各在data中定义一个相同的字段flag；
  • 2.在VM数据时，只会访问各自的data，这就是作用域；

作用域插槽

    两句话概括：
        1.父组件替换插槽的标签，但是内容由子组件来提供；
        2.插槽不仅可以让标签作为共同性，也可以让数据作为共同性传递出去；

用需求来进一步指明slot作用域插槽

    1.子组件中包括一组数据，比如：planguage:['js',’python‘,'c++','java']
    2.需要再多个界面进行展示：
        a.某些界面是以水平方向-展示的；
        b.某些界面是以列表形式展示的；
        c.某些界面是直接展示一个数据；
    3.内容在子组件，希望父组件告诉我们如何展示？利用slot作用域插槽

31.Slot作用域插槽_html

如图所示，如果用按照一般的slot进行引用，只会得到红框框的列表数据，

但是通过slot作用插槽，进行获取子组件的数据， 进行多样化展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <chilrderhtml></chilrderhtml>
    <chilrderhtml>
        <!--目的是获取子组件中的数组-->
        <!--vue2.5以下要想使用子组件的数组，必须使用template标签-->
        <template slot-scope="slot">
            <span v-for="item in slot.data">{{item}}</span>
        </template>
    </chilrderhtml>
</div>

<template id="chilrderhtml">
    <div>
        <!--data这个是自定义，随便取的-->
        <slot :data="planguages">
            <ul>
                <li v-for="item in planguages">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            chilrderhtml: {
                template: '#chilrderhtml',
                data() {
                    return {
                        planguages: ['js', 'python', 'c++', 'java']
                    }
                }
            }
        }

    });

</script>

</body>
</html>