040——VUE中组件之组件间的数据参props的使用实例操作
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>组件之组件间的数据参props的使用实例操作</title>
<script src="vue.js"></script>
</head> <body>
<div id="hdcms">
<hd-news hd="hdphp" cms="cms培訓" :show-del-button="false" :news="news"></hd-news >
</div>
<script typeof="text/x-template" id="hdNews">
<div>
{{hd}}--{{showDelButton}}
<div v-for="(v,k) in news">
{{v.title}}
<button v-if="showDelButton">刪除</button>
</div>
</div>
</script>
<script>
var hdNews = {
template: "#hdNews",
props: ['hd','cms','showDelButton','news'],
data() {
return {};
}
};
new Vue({
el: "#hdcms", //根组件，其他的就是子组件
//定义局部组件：
components: {
hdNews
},
data: {
news:[
{title:'hdcms'},
{title:'hdphp'},
{title:'hdphpHtml'}
]
}
});
</script> </body> </html>
040——VUE中组件之组件间的数据参props的使用实例操作的更多相关文章
- 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作
父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue中的父子组件相互调用
vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...
- vue中8种组件通信方式, 值得收藏!
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
- vue中使用keepAlive组件缓存遇到的坑
项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...
- Vue中，父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
- vue中兄弟之间组件通信
我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 ...
- VUE中模块与组件
组件:我们项目中,每一个资源(.js,.css,.vue,...)都是一个模块,这些模块是相互独立,但是我们可以通过类似于webpack构建工具把它们整合在一起,你可以理解为模块就是一个一个积木,通过 ...
- vue中修改子组件样式
一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...
随机推荐
- paramiko与ssh
一.paramiko模块的安装 paramiko模块依赖PyCrypto模块,而PyCrypto需要GCC库编译,不过一般发行版的源里带有该模块.这里以centos6为例,直接借助以下命令可以直接完成 ...
- 【Lua】模块与包
定义: 从用户观点来看,一个模块就是一个程序库,可以通过require来加载(require用于使用模块,module用于创建模块),然后便得到了一个全局变量,表示一个table,这个 ...
- oracle 查询按月份分组
如下表table1: 日期(exportDate) 数量(amount) -------------- ----------- 14- ...
- docker——安全防护与配置
Docker是基于Linux操作系统实现的应用虚拟化.运行在容器内的进程,跟运行在本地系统的进程本质上并无区别,配置不合适的安全策略将可能给本地系统带来安全风险,因此,Docker的安全性在生产环境中 ...
- 前端基础（CSS）
CSS 语法 .clearfix:after{ content: ""; display: block; clear: both; } 解决 float 块之后的塌陷(后面增加了一 ...
- ReactNative 环境配置
一直是从事iOS的开发,现在研究下mac环境下reatNative的环境配置: 1. 安装HomeBlew(OS系统上的一个安装包管理器,安装后可以方便后续安装包的安装.) 终端命令: ruby -e ...
- android studio gradle 国内代理
使用阿里云的国内镜像仓库地址,就可以快速的下载需要的文件 修改项目根目录下的文件 build.gradle : buildscript { repositories { maven{ url 'htt ...
- Could not load file or assembly 'Microsoft.Practices.EnterpriseLibrary.Common, Version=5.0.414.0, ...
使用oracle数据库一个多月依赖这问题一直都得不到解决,最近任务不是很忙了,所以决定把这问题解决掉.写一篇文章做记录. 以上错误主要是net程序oracle数据库使用了Microsoft Enter ...
- 前端学习笔记之HTTP协议
阅读目录 一 HTTP协议简介 二 HTTP协议之请求Request 三 HTTP协议之响应Response 四 HTTP协议完整工作流程 五 HTTP协议关键性总结 六 自定义套接字分析HTTP协议 ...
- HDU 4725 The Shortest Path in Nya Graph（最短路建边）题解
题意:给你n个点,m条无向边,每个点都属于一个层,相邻层的任意点都能花费C到另一层任意点,问你1到n最小路径 思路:没理解题意,以为每一层一个点,题目给的是第i个点的层数编号.这道题的难点在于建边,如 ...