<!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. D.E.Shaw——高频统计套利交易获利41亿美元

    黑科技,还是要提 D.E.Shaw Research 这个奇异的存在. 要讲这个黑科技,我们可能要扯远一点,先讲讲 D.E. Shaw 这个人是怎么学术赚钱通吃,成为彻底的人生大赢家的. D.E.Sh ...

  2. Swap---hdu2819(最大匹配)

    题意:通过交换行或者列来实现对角线(左上角到右下角)上都是1, 首先,如果某行全是0或者某列全是0必然不满足情况输出-1,如果能转换的话,那么必然可以通过全由行(列)变换得到: 还有就是对角线上的N个 ...

  3. 简单的共享文件http

    如果你急需一个简单的Web Server,但你又不想去下载并安装那些复杂的HTTP服务程序,比如:Apache,ISS等.那么, Python 可能帮助你.使用Python可以完成一个简单的内建 HT ...

  4. mysql int 整数类型 解释显示宽度 和 存储宽度

    存储宽度 是实际存储记录宽度 存储宽度默认是写死的,就算修改宽度也改变不了,改变的是显示宽度 ============有符号和无符号int============= 创建一个 无符号的 int 整数类 ...

  5. 很靠谱linux常用命令

    vim是打开vim编辑器,别的编辑器还有vi(功能没有vim 强大),nano,emacs等等,感觉还是vim最强大,其次是vi,别的就要差一些了. 我听我们老师说,用图形界面本身已经会被高手笑了,如 ...

  6. Spring源码解析（五）循环依赖问题

    引言 循环依赖就是多个类之间互相依赖,比如A依赖B,B也依赖A,如果日常开发中我们用new的方式创建对象,这种循环依赖就会导致不断的在创建对象,导致内存溢出. Spring是怎么解决循环依赖的问题的? ...

  7. svn命令行使用

    1.将文件checkout到本地目录    svn checkout path(path是服务器上的目录)    例如:svn checkout svn://192.168.1.1/pro/domai ...

  8. Linux系统——防火墙

    防火墙的作用 一种将内部网络和外部网络分开的方法,是一种隔离技术.防火墙在内网与外网通信是进行访问控制,一句锁设置的规则对数据包做出判断,最大限度地阻止网络中的黑客破坏企业网络,从而加强企业网络安全. ...

  9. WebService—规范介绍和几种实现WebService的框架介绍

    一.关于SOA(面向服务架构)思想   1.关于协议   2.SOA 的诞生 SOA(Service-Oriented Architecture)面向服务架构是一种思想,它将应用程序的不同功能单元通过 ...

  10. Python numpy 安装以及处理报错 is not a supported wheel on this platform

    1.    安装 1)去这里搜索https://pypi.org/ 2)搜索框输入numpy 3)一般第一个就是搜索到的 4)点进去 5) Download files 点进去,找自己的版本 6)nu ...