vue学习笔记之作用域插槽实例分析


Posted in Javascript onFebruary 01, 2020

本文实例讲述了vue学习笔记之作用域插槽。分享给大家供大家参考,具体如下:

<child></child>
Vue.component('child', {
   data: function () {
     return {
       list: [1, 2, 3]
     }
   },
   template: '<div>
          <ul>
            <li v-for="item of list">{{item}}</li>
          </ul>
         </div>'
})

那么,我们要想让父组件每一次调用子组件时再定义显示方式,也就是说,在子组件中定义好了v-for循环了list,具体怎么显示,由父组件告诉我。那么在子组件中定义一个slot插槽,在父组件中添加一个作用域插槽【需要用template包裹】,在其内写显示的样式。

父组件需要得到子组件数据时,就需要template标签。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue中作用域插槽</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <child>
    <template slot-scope="props">
      <li>{{props.item}}</li><!--我想渲染成列表形式-->
    </template>
  </child>
</div>
</body>
</html>
<script>
  Vue.component('child', {
    data: function () {
      return {
        list: [1, 2, 3]
      }
    },
    template: '<div><ul><slot v-for="item of list" :item="item">{{item}}</slot></ul></div>'
  })
  var vm = new Vue({
    el: '#app'
  })
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
jquery的live使用注意事项
Feb 18 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
javascript实现评分功能
Jun 24 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 #Javascript
Jquery Datatables的使用详解
Jan 30 #jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 #jQuery
js页面加载后执行的几种方式小结
Jan 30 #Javascript
javascript设计模式之装饰者模式
Jan 30 #Javascript
原生js+ajax分页组件
Jan 30 #Javascript
javascript设计模式之迭代器模式
Jan 30 #Javascript
You might like
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
Python 编程速成(推荐)
2019/04/15 Python
python查看数据类型的方法
2019/10/12 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
python实现对变位词的判断方法
2020/04/05 Python
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
英语专业毕业生自荐信
2013/10/28 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
大学课外活动总结
2014/07/09 职场文书
2014年基建工作总结
2014/12/12 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL