Vue插槽(solt)简单案例

当前页面向子组件传递的值带有HTML标签等特殊的字符时,传统的标签是无法解析的,这时候就需要用插槽(solt)功能来传递变量值

ItemOne.vue子组件中通过solt定义一个插槽

  1. <template>
  2. <li class="item">
  3. <input type="checkbox" v-model="checked" />
  4. <!--插槽的名称和下面的属性名要对应-->
  5. <!--插槽将checked变量传递出去,方便调用者改变变量值-->
  6. <slot name="comp" v-bind="{checked}"></slot>
  7. </li>
  8. </template>
  9. <script>
  10. export default {
  11. //属性名应该和插槽保持一致
  12. props:['comp'],
  13. data(){
  14. return {
  15. checked:false
  16. }
  17. }
  18. }
  19. </script>
  20. <!--scoped表示css样式的作用域限制在当前文件中-->
  21. <style scoped>
  22. .item{
  23. color: red;
  24. }
  25. </style>

调用子组件

  1. <template>
  2. <div id="app">
  3. {{msg}}
  4. <div>
  5. <!--v-model绑定到info变量上-->
  6. <input type="text" v-model="info">
  7. <!--@click绑定点击事件-->
  8. <button @click="handle">添加</button>
  9. </div>
  10. <!--必须绑定:key :item表示组件ItemOne.vue的定义的变量,通过的属性的方式传递值到子组件-->
  11. <item-one v-for="item in list" :key="item">
  12. <!-- v-slot绑定子组件的comp属性,并通过itemPros接收子组件传递过来的checked变量-->
  13. <template v-slot:comp="itemPros">
  14. <!--子组件将checked的值传递出来,通过true和false来显示不同的字体颜色-->
  15. <span :style="{fontSize:'30px',color:itemPros.checked?'green':'blue'}">{{item}}</span>
  16. </template>
  17. </item-one>
  18. </div>
  19. </template>
  20. <script>
  21. import ItemOne from './components/ItemOne'
  22. export default {
  23. name: 'App',
  24. data() {
  25. return {
  26. msg: "hello 入门小站",
  27. info: '',
  28. list: []
  29. }
  30. },
  31. methods: {
  32. handle(){
  33. this.list.push(this.info);
  34. this.info='';
  35. }
  36. },
  37. components: {
  38. ItemOne
  39. }
  40. }
  41. </script>
  42. <style>
  43. #app {
  44. font-family: Avenir, Helvetica, Arial, sans-serif;
  45. -webkit-font-smoothing: antialiased;
  46. -moz-osx-font-smoothing: grayscale;
  47. text-align: center;
  48. color: #2c3e50;
  49. margin-top: 60px;
  50. }
  51. </style>

源码工程:https://github.com/mifunc/rumenz-vue/tree/master/rumenz-vue-solt

返回笔记列表
入门小站