<!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. 深入理解flannel

    1 概述 根据官网的描述,flannel是一个专为kubernetes定制的三层网络解决方案.它主要用于解决容器的跨主机通信问题.首先我们来简单看一下,它是如何工作的. 首先,flannel会利用Ku ...

  2. 002-Spring Framework-Core-01-IoC容器

    一.概述 文章地址:https://docs.spring.io/spring/docs/5.0.6.RELEASE/spring-framework-reference/ 核心主要包括:IoC co ...

  3. js-template-art【四】通过helper方法注册，调用外部方法

    一.语法 模板代码中调用外部函数,需要通过helper方法注册 template.helper(name, callback) 二.使用[实例] 原文:http://blog.csdn.net/u01 ...

  4. altium designer生成gerber步骤

    什么是gerber文件             Gerber文件是所有电路设计软件都可以产生的文件,在电子组装行业又称为模版文件(stencil data),在PCB制造业又称为光绘文件.可以说Ger ...

  5. 给iphone配置qq邮箱

    在手机上使用qq邮箱发送和接受邮件,但是又不用qq邮箱,我用的是“网易邮箱大师” ,那么就需要配置服务. 1.在qq邮箱中设置邮箱,开启相关的服务,然后用手机发送短信来生成授权码.最后在手机上设置的密 ...

  6. Terminal（终端） 在 OS X下如何快速调用

    Terminal(终端) 在 OS X下如何快速调用 转载请注明原作者:文章如果对您有所启发或帮助,不介意您请我喝一杯咖啡 ​ Terminal作为人机交流中极其重要的一部分,无论是在Windows. ...

  7. 20155333 2016-2017-2 《Java程序设计》第七周学习总结

    20155333 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 Lambda 教材的引入循序渐近.深入浅出 Lambda去重复,回忆DRY原则 Lambda ...

  8. Flux 单向数据流

    Flux 的核心就是一个简单的约定:视图层组件不允许直接修改应用状态,只能触发 action.应用的状态必须独立出来放到 store 里面统一管理,通过侦听 action 来执行具体的状态操作. 所谓 ...

  9. web上的复制

    你可能曾经尝试过复制网页上的一些文字,得到的却是令人沮丧的的结果.这篇文章介绍相关的内容. 不是真正的文字 这可能是最常见的问题,很多人尝试对一张带有文字的图片进行像文字那样的选择,复制当然不行了. ...

  10. [转][修]sprintf()函数：将格式化的数据写入字符串

    头文件:#include <stdio.h>功能:用于将格式化的数据写入字符串 原型:int sprintf(char *str, char * format [, argument, . ...