<!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的使用实例操作的更多相关文章

  1. 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作

    父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  2. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  3. vue中的父子组件相互调用

    vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...

  4. vue中8种组件通信方式, 值得收藏!

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...

  5. vue中使用keepAlive组件缓存遇到的坑

    项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...

  6. Vue中，父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  7. vue中兄弟之间组件通信

    我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 ...

  8. VUE中模块与组件

    组件:我们项目中,每一个资源(.js,.css,.vue,...)都是一个模块,这些模块是相互独立,但是我们可以通过类似于webpack构建工具把它们整合在一起,你可以理解为模块就是一个一个积木,通过 ...

  9. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

随机推荐

  1. Java字符编码问题

    今天研究了一下,记录下来 中间用的是redis,可以使用任意其他的io替代,一样的 Test1 String s1 = "我要测试"; String s2 = "I wa ...

  2. remote git server

    EControl5.0ssh://mygit@192.168.6.70/ISRL/SPDH/EControl.gitPTSssh://mygit@192.168.6.70/ISRL/ISaints/p ...

  3. saltstack master minion 配置文件

    Master端的配置是修改/etc/salt下master配置文件.以下是Master端常用的配置. interface: 指定bind 的地址(默认为0.0.0.0) publish_port: 指 ...

  4. 【开发者笔记】揣摩Spring-ioc初探，ioc是不是单例？

    前言: 控制反转(Inversion of Control,英文缩写为IoC)把创建对象的权利交给框架,是框架的重要特征,并非面向对象编程的专用术语.它包括依赖注入(Dependency Inject ...

  5. Openstack(十三)部署管理服务horizon

    13.1horizon介绍 horizon是openstack的管理其他组件的图形显示和操作界面,通过API和其他服务进行通讯,如镜像服务.计算服务和网络服务等结合使用,horizon基于python ...

  6. IETF国标查询

    IETF官网 https://www.ietf.org/ rfc国标官网 https://www.ietf.org/standards/rfcs/ rfc国标查询 https://www.rfc-ed ...

  7. Selenium之Chrome浏览器的启动问题及解决

    System.setProperty("webdriver.chrome.driver","chromedriver.exe路径"); 配置好Chrome的驱动 ...

  8. iis6下配置支持.net4.0&发布网站[转]

    iis6配置支持.net4.0 在win2003操作系统上发布两个网站,首先配置iis: 1.下载 .net framework 4.0   差不多48MB 2.安装 3.打开iis: 开始=> ...

  9. 表单验证—js循环所有表单验证

    [封装为表单验证的专用js,所有表单页面都可以调用] 1.表单 <form id="regForm" method="post" action=" ...

  10. 2018-2019 ACM-ICPC, Asia East Continent Finals Solution

    D. Deja vu of … Go Players 签. #include <bits/stdc++.h> using namespace std; int t, n, m; int m ...