在插槽和组件vuejs之间传递数据

Question

hi im在项目中使用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>