vue插槽的说明和传递参考示例代码

插槽分为默认插槽和命名插槽：

默认插槽：

//父组件div h3父组件/h3测试子div默认插槽/div/测试子/div//子组件div h4子组件/H4插槽/插槽/div

命名插槽：

注意：命名槽需要包装在模板标签中，否则将报告错误

//父组件div h3父组件/test子模板v-slot 3360 test//v-slot 3360 locket名称ul Li v-for='列表中的项“{item。名称} }/Li/ul/template/test child/div//A子组件div h4子组件/h4插槽名称='测试'/插槽//名称='插槽名称'/div

子组件将参数传输到父组件：

//父组件div h3父组件/h3test child Template v-slot3360 test=' data '/命名插槽，v-slot 3360插槽名称=' custom data name '，子组件传递的参数都是其属性ul Li v-for=' item in data . list 2 ' { item . name } }/Li/ul/模板/模板v-slot=' data default '/default slot { { data default . sname } }/Template/test child/div//子组件模板div h4子组件/H4插槽名称=' test '

补充：vue使用插槽将值传递给父组件

没有太多流言蜚语，代码

子组件，它有一个槽和绑定到该槽的文本值

template div @ click=' $ emit(' change '，checked 1)' slot name=' icon ' : text=' text '/slot/div/template script export default { data(){ return { text : ' I是子组件' } } }、prop 3360[' checked ']、model : {prop:' checked '、event : ' change ' }/script父组件可以通过slot-scope和version 2获取绑定在子组件slot上的值。

模板div id='app' img src='http:/assets/logo.png '！-router-view/-car v-model=' index ' div slot=' icon ' slot-scope=' props ' { props . text } }/div/car/div/template

通过这种方式，您可以获得子组件中的文本值。

摘要

以上是边肖介绍的vue槽的讲解和参考示例代码，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！