在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',{

    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>