045——VUE中组件之父组件使用scope定义子组件模板结构
<!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定义子组件模板结构的更多相关文章
- 45.VUE学习之--组件之父组件使用scope定义子组件模板样式结构实例讲解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VUE中的子父组件、兄弟组件之间相互传值，相互调用彼此的方法
vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...
- 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- Vue中的scoped及穿透方法（修改第三方组件局部的样式）
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...
- vue中引入awesomeswiper的方法以及编写轮播组件
1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3 ...
- VUE中的style 样式处理的Scope （<style scope>）
在VUE组件中,为了让样式私有化,不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块. 但是这样的话,就会导致无法修改其他第三方组件样式,或者是内嵌的样式,解决方案 ...
- Vue 中的 子组件 给 父组件 传值
子组件的某一个事件(sendData)内部,通过this.$emit('事件名', 传递的值)传递数据父组件在调用子组件的地方,绑定了子组件自定义的 事件名(change-data) 定义父组件的地方 ...
- vue子组件向父组件传值
vue2.0中通过$emit事件在子组件中自定义事件,通过操作子组件中的事件,向父组件传递参数: 首先写一个叫做parentComp.vue的父组件: <template> <div ...
- 【vue】父向子组件传参、子组件向父传参
1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...
随机推荐
- Django - Jsonp、CORS
一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...
- jQuery中通过$.browser来判断浏览器
一.使用方法 语法:$.browser.["浏览器关键字"] $(function() { if($.browser.msie) { alert("this is IE& ...
- 《码农周刊》干货精选--Python篇（转）
原文:http://baoz.me/446252 码农周刊,本人有修改 Python标准库,第三方库 按功能进行了分类,之前有一Pythoner说there is a library for ev ...
- kubernetes实战(三)：k8s v1.11.1 持久化EFK安装
1.镜像下载 所有节点下载镜像 docker pull kibana: docker tag kibana: docker.elastic.co/kibana/kibana: docker pull ...
- IDEA安装以及项目初始化
首先安装idea: 如果15.0版本安装不上就安装16.0: 点击安装文件以后,一直点下一步就可以了. 安装完成后设置: 如果没有的话,需要点击SDKs,点击+,然后选择电脑上安装的JDK. 接下来创 ...
- SchuledExecutorService 使用controller控制线程关闭
1:SchuledExecutorService 使用controller控制线程关闭 package com.li.controller; import org.springframework.s ...
- FTP服务器配置实践
1.为linux系统分配IP地址:192.168.X.1/24,并重启网络服务,客户端XP系统IP地址为:192.168.X.2/24, 2.查询本机是否安装了vsftpd服务,结果显示未安装,挂载光 ...
- Python笔记 #11# 统计图定制化
将数据可视化有许多选择: 图的类型 定制化方式 选择什么样的表现方式通常取决于: 数据 你想表达什么 1.Labels # Basic scatter plot, log scale plt.scat ...
- STM32 DMA简述
STM32 DMA简述 DMA (Direct Memory Access) 直接内存存储器,在做数据传输时能够大大减轻CPU的负担. DMA的作用 DMA提供了一个关于数据的高数传输通道,这个通道不 ...
- 20145335郝昊《网络对抗》逆向及Bof基础实践
20145335郝昊<网络对抗>逆向及Bof基础实践 1.实践说明 本次实践是对一个名为pwn1的可执行Linux文件进行操作.程序的执行流程是:主函数main调用foo函数,foo将函数 ...