在slot和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',{&nbsp; &nbsp; template:&nbsp; &nbsp; '<div>'+&nbsp; &nbsp; &nbsp; &nbsp; <slot name='Slot_name'></slot>&nbsp; &nbsp; '</div>',&nbsp; &nbsp; data:function(){&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this_is_test_data:null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; custom_method:null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; custom_model:null&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; methods:{&nbsp; &nbsp; &nbsp; &nbsp; custom_method:function()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // code here&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; props:{}});这是html代码<div is='search_and_select' >&nbsp; &nbsp; <div slot='Slot_name' slot-scope="{ custom_method, custom_model}">&nbsp; &nbsp; &nbsp; &nbsp;<input type='text' @keyup='custom_method()' v-model='custom_model' />&nbsp; &nbsp; </div></div>