Grundlegende Verwendung und Wertübergabe der Slot-Komponente

## 不使用插槽组件

**father.vue**
<template>
    <div>
        <div>我是爸爸</div>
        <el-button @click="addFn">新增</el-button>
        <children @dataList="dataList"></children>
    </div>
</template>
<script>
import children from './children.vue'
export default {
    
    
    name: 'fatherCom',
    components:{
    
    children},
    data(){
    
    
        return{
    
    
            showDialog: false,
            dataL: {
    
    }
        }
    },
    methods:{
    
    
    }
}
</script>

**children.vue**
<template>
    <div>
        <div>我是儿子</div>
        <el-button @click="sendToFather">上传提交</el-button>
    </div>
</template>
<script>
export default {
    
    
    name: 'childrenCom',
    data(){
    
    
        return{
    
    
        }
    },
    methods:{
    
    
    }
}
</script>

## 使用基础插槽组件并传值到父组件可在data中使用
**father.vue**
<template>
    <div>
        <div>我是爸爸</div>
       // 使用具名插槽后使用子组件emit传值dataList,可以到data中使用
        <children @dataList="dataList">
            <template #addBtn>
            // #addBtn = v-slot:addBtn 
                <el-button @click="addFn">新增</el-button>
            </template>
        </children> -->
        
    </div>
</template>
<script>
import children from './children.vue'
export default {
    
    
    name: 'fatherCom',
    components:{
    
    children},
    data(){
    
    
        return{
    
    
            reciveData: []
        }
    },
    methods:{
    
    
         dataList(val){
    
    
            console.log('收到来自儿子',val)
            this.reciveData = val
        },
    }
}
</script>

**children.vue**
<template>
    <div>
        <div>我是儿子</div>
        <slot name="addBtn"></slot>
        <el-button @click="sendToFather">上传提交</el-button>
    </div>
</template>
<script>
export default {
    
    
    name: 'childrenCom',
    data(){
    
    
        return{
    
    
        }
    },
    methods:{
    
    
        sendToFather(){
    
    
            console.log('发送');
            const dataList = [{
    
    id:1,name:'a'},{
    
    id:2,name:'b'};
            this.$emit('dataList', dataList);
        },
    }
}
</script>

## 使用基础插槽组件并传值到父组件只可在<template>中使用，
**father.vue**
<template>
    <div>
        <div>我是爸爸</div>
	     <children>
	     // 具名时直接赋值childData是个对象{}，需要去娶具体的值，或者直接使用#addBtn="{msg}"
            <template #addBtn="childData">  
                <el-button @click="addFn">新增</el-button>
                <div>{
    
    {
    
    childData.msg}}</div>
            </template>
         </children>
        
    </div>
</template>
<script>
import children from './children.vue'
export default {
    
    
    name: 'fatherCom',
    components:{
    
    children},
    data(){
    
    
        return{
    
    
        }
    },
    methods:{
    
    
    }
}
</script>

**children.vue**
<template>
    <div>
        <div>我是儿子</div>
        <slot name="addBtn" :msg="msg"></slot>
        <el-button @click="sendToFather">上传提交</el-button>
    </div>
</template>
<script>
export default {
    
    
    name: 'childrenCom',
    data(){
    
    
        return{
    
    
            msg:'子组件传值到父组件template'
        }
    },
    methods:{
    
    
        sendToFather(){
    
    
            console.log('发送');
    
        },
    }
}
</script>