当前页面向子组件传递的值带有HTML标签等特殊的字符时,传统的标签是无法解析的,这时候就需要用插槽(solt)功能来传递变量值
ItemOne.vue子组件中通过 solt
定义一个插槽
<template> <li> <input type="checkbox" v-model="checked" /> <!--插槽的名称和下面的属性名要对应--> <!--插槽将checked变量传递出去,方便调用者改变变量值--> <slot name="comp" v-bind="{checked}"></slot> </li> </template> <script> export default { //属性名应该和插槽保持一致 props:['comp'], data(){ return { checked:false } } } </script> <!--scoped表示css样式的作用域限制在当前文件中--> <style scoped> .item{ color: red; } </style>
调用子组件
<template> <div id="app"> {{msg}} <div> <!--v-model绑定到info变量上--> <input type="text" v-model="info"> <!--@click绑定点击事件--> <button @click="handle">添加</button> </div> <!--必须绑定:key :item表示组件ItemOne.vue的定义的变量,通过的属性的方式传递值到子组件--> <item-one v-for="item in list" :key="item"> <!-- v-slot绑定子组件的comp属性,并通过itemPros接收子组件传递过来的checked变量--> <template v-slot:comp="itemPros"> <!--子组件将checked的值传递出来,通过true和false来显示不同的字体颜色--> <span :style="{fontSize:'30px',color:itemPros.checked?'green':'blue'}">{{item}}</span> </template> </item-one> </div> </template> <script> import ItemOne from './components/ItemOne' export default { name: 'App', data() { return { msg: "hello 入门小站", info: '', list: [] } }, methods: { handle(){ this.list.push(this.info); this.info=''; } }, components: { ItemOne } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
注意:本文来自SegmentFault博客。本站无法对本文内容的真实性、完整性、及时性、原创性提供任何保证,请您自行验证核实并承担相关的风险与后果!
CoLaBug.com遵循[CC BY-SA 4.0]分享并保持客观立场,本站不承担此类作品侵权行为的直接责任及连带责任。您有版权、意见、投诉等问题,请通过[eMail]联系我们处理,如需商业授权请联系原作者/原网站。
CoLaBug.com遵循[CC BY-SA 4.0]分享并保持客观立场,本站不承担此类作品侵权行为的直接责任及连带责任。您有版权、意见、投诉等问题,请通过[eMail]联系我们处理,如需商业授权请联系原作者/原网站。