slot插槽组件基本用法和传值

## 不使用插槽组件

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