<!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. Vanish/squid

    http://www.yl1001.com/article/5291411898652918.htm HTTP加速 简单的说,在本次测试中,Varnish将来自80的请求转发到后端的nginx8080 ...

  2. 约会安排---hdu4553（线段树，麻烦的区间覆盖）

      题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4553 算是poj3667的加强版,建立两颗线段树,一个是DS区间,另一个是NS区间.那么根据题意, ...

  3. form表单上传图片问题:线下可以而线上不可以

    由于上传图片需要一定时间,而线下速度快线上速度慢. 所以如果你的上传窗口是弹出界面,那么就会面临上传未完成就关闭了该界面.导致上传失败.

  4. 华硕主板M2N-电源跳线怎么接

    华硕主板M2N 详细参数 http://detail.zol.com.cn/91/90618/param.shtml 电源跳线的连接方法:1.把所有排线理在一起,根据上面的标注,先来明确每根线的定义: ...

  5. linux问题点滴，给普通用户添加sudo权限

    最近又把linux捡起来了,虚拟机中安个元老级centos5.3继续搞.使用sudo临时获取超管权限命令时,提示”xxx is not in the sudoers file. This incide ...

  6. 数值积分：基于牛顿-柯茨公式的定步长和自适应积分方法 [MATLAB]

    #先上代码后补笔记# #可以直接复制粘贴使用的MATLAB函数!# 1. 定步长牛顿-柯茨积分公式 function [ integration ] = CompoInt( func, left, r ...

  7. VS2010/MFC编程入门之九（对话框：为控件添加消息处理函数）

    创建对话框类和添加控件变量在上一讲中已经讲过,这一讲的主要内容是如何为控件添加消息处理函数. MFC为对话框和控件等定义了诸多消息,我们对它们操作时会触发消息,这些消息最终由消息处理函数处理.比如我们 ...

  8. uva1452

    这题说的是给了一个序列1到n然后你从1 位置开始数k个删除,直到最后每个数都被删除了.我们考虑1个数在被删除前后的位置,比如现在在i位置那么 回到删除当前的最后一个是 (i+k)L 了为删除前 的 个 ...

  9. DB杂记

    1. mybatits 批量插入: <insert id="insertColumnitem2"> INSERT INTO REPORT_COLUMNITEM (COL ...

  10. Qt的信号和槽是如何工作的

    用Qt做过开发的朋友,不知道是否曾为下面这些问题疑惑过:我们知道Qt是基于C++的,Qt写的代码最终还是要由C++编译器来编译,但是我们的Qt代码中有很多C++里没有的关键字,比如slots\sign ...