CODEWITHSUNDEEP
javascripthtmllaravelvuejs2
softya
softya

Reputation: 260

pass data between slot and component vuejs

hi im using vuejs2 and laravel in project what im asking is it possible to pass data from slot to component like this 

 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:{}
});

and this is the html code 

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

can i do this code also if not can anyone help me how to do something like this ..

Upvotes: 1

Views: 104

Answers (1)

Daniel
Daniel

Reputation: 35684

That's what slot-scope is for

in your code, it would look something like this...

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:{}
});

and this is the html code

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

Upvotes: 1

Related Questions