<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>组件之父组件使用scope定义子组件模板结构</title>

    <script src="vue.js"></script>

</head>

<body>

<div id="hdcms">

    <hd-list :data="news">

        <template scope="v">

            <li>

                <h1>{{v.field.title}}</h1>

            </li>

        </template>

    </hd-list>

</div>

<script typeof="text/x-template" id="hdList">

    <ul>

        <slot v-for="v in data" :field="v"></slot>

    </ul>

</script>

<script>

    var hdList = {

        template: "#hdList",

        props:['data']

    };

    new Vue({

        el: "#hdcms",

        components: {hdList},

        data:{

            news:[

                {title:'phpjava'},

                {title:"课程学习"}

            ]

        }

    });

</script>

</body>

</html>

　　

045——VUE中组件之父组件使用scope定义子组件模板结构的更多相关文章

  1. 45.VUE学习之--组件之父组件使用scope定义子组件模板样式结构实例讲解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. VUE中的子父组件、兄弟组件之间相互传值，相互调用彼此的方法

    vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...

  3. 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  4. Vue中的scoped及穿透方法（修改第三方组件局部的样式）

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...

  5. vue中引入awesomeswiper的方法以及编写轮播组件

    1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3 ...

  6. VUE中的style 样式处理的Scope （<style scope>）

    在VUE组件中,为了让样式私有化,不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块. 但是这样的话,就会导致无法修改其他第三方组件样式,或者是内嵌的样式,解决方案 ...

  7. Vue 中的 子组件 给 父组件 传值

    子组件的某一个事件(sendData)内部,通过this.$emit('事件名', 传递的值)传递数据父组件在调用子组件的地方,绑定了子组件自定义的 事件名(change-data) 定义父组件的地方 ...

  8. vue子组件向父组件传值

    vue2.0中通过$emit事件在子组件中自定义事件,通过操作子组件中的事件,向父组件传递参数: 首先写一个叫做parentComp.vue的父组件: <template> <div ...

  9. 【vue】父向子组件传参、子组件向父传参

    1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...

随机推荐

  1. 拨开障目的叶，一览CMDB庐山真面目

    人们往往用"一叶障目,不见泰山"来形容一个人被局部现象所迷惑,看不到事物发展的整体脉络,从而做出一些不是十分正确的决策.小编觉得对于运维何尝不是这样呢. 大多数企业资产配置维护的现 ...

  2. 洛谷P3939 数颜色 二分查找

    正解:二分 解题报告: 传送门! 话说其实我开始看到这题想到的是分块,,, 但是显然不用这么复杂,,,因为仔细看下这题,会发现每次只改变相邻的兔子的位置 所以开个vector(或者开个数组也成QwQ( ...

  3. SDWebimage清空缓存

    清空缓存 - (void)clearTmpPics{ [[SDImageCache sharedImageCache] clearDisk]; [[SDImageCache sharedImageCa ...

  4. C#基础整理(二)

    1.变量类型int.double.string.char.bool.decimal变量使用规则:先声明,再赋值,最后使用 2.命名规范:Camel:第一个单词首字母小写,其他单词首字母大写,其余字母小 ...

  5. java-mybaits-00602-查询缓存-mybatis整合ehcache

    ehcache是一个分布式缓存框架.EhCache 是一个纯Java的进程内缓存框架,是一种广泛使用的开源Java分布式缓存,具有快速.精干等特点,是Hibernate中默认的CacheProvide ...

  6. Exception in thread "main" java.lang.NoClassDefFoundError: scala/Product$class

    在使用spark sql时一直运行报这个错误,最后仔细排查竟然是引入了两个scala library .去除其中一个scala的编译器即可 Exception in thread "main ...

  7. vuejs和webpack项目（VueComponent）初尝试——瀑布流组件

    碎碎念:     好久不见,最近自己有些懈怠没更过多少博,主要原因之一是对自己学习方式的一些思考,翻看之前的博客多是记录学习笔记这反映出了自己对于前端还停留在学习-复习知识点的阶段压根没多少实践经验啊 ...

  8. ng-深度学习-课程笔记-11: 卷积神经网络(Week1)

    1 边缘检测( edage detection ) 下图是垂直边缘检测的例子,实际上就是用一个卷积核进行卷积的过程. 这个例子告诉我们,卷积可以完成垂直方向的边缘检测.同理卷积也可以完成水平方向的边缘 ...

  9. （转载）找圆算法（(HoughCircles)总结与优化

      Opencv内部提供了一个基于Hough变换理论的找圆算法,HoughCircle与一般的拟合圆算法比起来,各有优势:优势:HoughCircle对噪声点不怎么敏感,并且可以在同一个图中找出多个圆 ...

  10. 20145105 《Java程序设计》第5周学习总结

    20145105 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 异常处理 一.语法与继承架构 (一)使用try.catch 执行流程 尝试执行try区块中程序代码 如果出现 ...