<!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. dongle --NFC

    A dongle is a small piece of hardware that attaches to a computer, TV, or other electronic device in ...

  2. 构建vue项目（vue 2.x）时的一些配置问题（持续更新）

    基于前文,使用vue-cli脚手架工具构建项目,并使用了webpack,那么我在项目中遇到的一些与配置相关的问题将在这里进行汇总. 1.代码检查问题 由于我们在构建项目时,使用了Eslint对我们的项 ...

  3. mysql 数据操作 单表查询 group by 分组 目录

    mysql 数据操作 单表查询 group by 介绍 mysql 数据操作 单表查询 group by 聚合函数 mysql 数据操作 单表查询 group by 聚合函数 没有group by情况 ...

  4. 301-React Ext-React创建组件的三种方式及其区别

    一.概述 React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形 ...

  5. Openstack（十五）快速添加新计算节点

    当后期添加新物理服务器作为计算节点,如果按照上面的过程安装配置的话会非常的慢,但是可以通过复制配置文件的方式快速添加. 15.1计算节点服务安装 #提前将yum仓库.防火墙.selinux.主机名.时 ...

  6. [py]多态的理解

    多态 不同的数据类型,执行相同的方法,产生的状态不同 不同对象调用相同的方法(运行时候的绑定状态) #!/usr/bin/env python # coding=utf-8 class H2O: de ...

  7. java的==和equal的区别（一）

    java的==和equal的区别 “==”是用来比较两个String对象在内存中的存放地址是否相同的.例如, 1 2 3 4 5 6 7 8 9 String test1 = "test&q ...

  8. （转）JavaScriptSerializer,DataContractJsonSerializer解析JSON字符串功能小记

    JsonAbout: using System;using System.Collections.Generic;using System.Linq;using System.Text;using S ...

  9. QML基本可视化元素--Text

    一个Text项目可以显示纯文本或者富文本 1.     可以使用Html标记:text: “<b>HELLO</b>” 2.     宽度和高度(width, height): ...

  10. STM32端口输入输出模式配置

    STM32的IO口模式配置 根据数据手册提供的信息,stm32的io口一共有八种模式,他们分别是: 四种输入模式 上拉输入:通过内部的上拉电阻将一个不确定的信号通过一个电阻拉到高电平. 下拉输入:把电 ...