关于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…