vue插槽作用域问题

作用域

父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译

var app = new Vue({
        el: '#app',
        data: {
            message:"hello",
            name:"ton"
        },
        methods: {},
        components:{
            cpn:{
                template:'#cpn',
                data(){
                    return{
                        message:"我是子组件的信息"
                    }
                }
            }
        }
     });

<div id ="app">
        <cpn>
            <h2>{{message}}</h2> 
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <slot></slot>
            <p>{{message}}</p>
        </div>
    </template>

在cpn的h2标签中的message会被解析为父作用域中的message，组件中的message会被解析为子作用域的message

解析结果图

作用域插槽的使用

在使用组件插槽时，有时需要在cpn自定义html内容中用到组件定义域中的数据

<div id ="app">
        <cpn></cpn>
        <cpn>
            <span v-for="item in languages"></span>
            <!-- 会报错，找不到languages -->
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <slot>
                <li v-for="item in languages">{{item}}</li>
                <!-- 正常输出 -->
            </slot>
        </div>
    </template>

var app = new Vue({
        el: '#app',
        data: {
            message:"hello",
            name:"ton"
        },
        methods: {},
        components:{
            cpn:{
                template:'#cpn',
                data(){
                    return{
                        message:"我是子组件的信息",
                        languages:['java','js','go','mysql']
                        // 这里定义languages数据
                    }
                }
            }
        }
     });

父组件直接使用子组件中的数据会出错，所以用slot-scope来传递数据

<cpn>
            <!-- <span v-for="item in languages"></span> -->
            <!-- 会报错，找不到languages -->
            <template slot-scope="slot">
                <!-- vue2.5以下要用template标签 -->
                <span v-for="item in slot.data">{{item}}</span>
                <!-- slot为template的slot-scope值.data为子组件传递的值 -->
            </template>
        </cpn>

<template id="cpn">
        <div>
            <slot :data="languages">
                <!-- :data传递数据 -->
                <li v-for="item in languages">{{item}}</li>
                <!-- 正常输出 -->
            </slot>
        </div>
    </template>

slot和data都可以自定义