关于vue.js:Vue插槽solt简单案例

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

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

<template>
     <li class="item">
         <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>

源码工程:https://github.com/mifunc/rum…