передавать данные между слотом и компонентом vuejs

Question

Привет, я использую vuejs2 и laravel в проекте, что я спрашиваю, возможно ли передать данные из слота в компонент, как это

 Vue.component('search_and_select',{
    template:
    '<div>'+
        <slot name='Slot_name'></slot>
    '</div>',
    data:function(){
        return {
            this_is_test_data:null,
            custom_method_here:null,
            custom_model :null
        }
    },
    methods:{
        custom_method_here:function()
        {
            // code here
        }
    },
    props:{}
});

, и это код html

<div is='search_and_select' >
    <div slot='Slot_name'>
    <!-- 
       is is possible to write code here like this   
       <input type='text' @keyup='custom_method()' v-model='custom_model' />
     -->
    </div>
</div>

Могу ли я сделать этот код также, если не может кто-нибудь помочь мне, как сделать что-то вроде этого ..

Answer 1

Это то, что slot-scope для

в вашем коде, это будет выглядеть примерно так ...

Vue.component('search_and_select',{
    template:
    '<div>'+
        <slot name='Slot_name'></slot>
    '</div>',
    data:function(){
        return {
            this_is_test_data:null,
            custom_method:null,
            custom_model:null
        }
    },
    methods:{
        custom_method:function()
        {
            // code here
        }
    },
    props:{}
});

и это код html

<div is='search_and_select' >
    <div slot='Slot_name' slot-scope="{ custom_method, custom_model}">
       <input type='text' @keyup='custom_method()' v-model='custom_model' />
    </div>
</div>