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/rumenz-vue/tree/master/rumenz-vue-solt

Vue插槽(solt)简单案例相关推荐

vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
Vue 组件封装简单案例——小白入门
今天初步接触了 Vue 中的组件封装,将写好的公用组件封装在 src 的 components 文件夹下,在 views 文件夹下的 .vue 文件可以进行调用以最简单的 button 按钮封装为例 ...
vue的一个简单案例
增删查改 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title&g ...
vue.js的学习中的简单案例
今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...
vue下使用fullcalendar及简单案例
ps:我真的感觉自己是个前端了,最近天天在写前端.不过很多复杂逻辑,后台处理起来比较麻烦,所以只让后台提供简单数据,前端封装处理数据确实比较方便! 引子:最近公司要做个人日程管理,故鄙人思前想后,选择 ...
Vue实现计算商品总价简单案例
计算商品总价简单案例-Vue 练习vue的指令和计算属性的一个小案例. 主要效果: 数量增加和减少,小于1不可操作删除操作任何加.减.删除操作都会更新总价商品全删除后显示提示代码: <b ...
vue插槽面试题_常见的vue面试题
001.v-show与v-if的区别 v-show:操作的是元素的display属性 v-if:操作的是元素的创建和插入相比较而言v-show的性能要高 002.methods.computed.w ...
Android复习12【广播接收者-BroadcastReceiver（简单案例-发送广播、静态注册、动态注册、本地广播、代码示例(别处登陆踢用户下线)、常用系统广播总结、音乐播放器）】
2020-04-28[11周-周二] 音乐播放器Android代码下载:https://wws.lanzous.com/ifqzihaxvij 目录简单案例-发送广播 2)动态注册实例(监听网 ...
Vue插槽的使用和插槽的传值操作
最近有小伙伴询问Vue中插槽的使用,或者有些对插槽比较陌生的有比较想用的,这里我就针对Vue的插槽使用方式进行简单的讲解,其实对于插槽最全的还要属官方文档,但是有些小伙伴就是不爱看官方文档,那么就来看 ...

Vue插槽(solt)简单案例

Vue插槽(solt)简单案例相关推荐

最新文章

热门文章