父组件向子组件里传参,props的使用实例

例子一

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue</title>
<link rel="stylesheet" href="">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script type="text/javascript" src="../js/vue.js"></script> --> </head>
<body>
<div id="hdcms">
<!--hd="abc"传递字符串 :show-title:加上冒号传递的就是一个变量了(注意驼峰命名和-号命名的写法) -->
<hd-news hd="abc" css="testcss" :list="news" :show-title="showTitle"></hd-news> <!--引入模板 和new Vue()里的components里注册时的名字 hdNews 要一致--> </div>
<script type="text/x-template" id="hdNewstemplate">
<div>
<span>{{hd}}</span>
<span>{{css}}</span>
<li v-for="(v,k) in list">
{{v.title}}
<button v-if="v.show" @click="list.splice(k,1)">删除</button>
<input v-model="v.show" type="checkbox">显示删除按钮
<button v-if="!v.show" @click="v.show?v.show=false:v.show=true">显示删除按钮</button>
</li>
{{showTitle}}
</div> </script>
<script>
var hdNews={
//绑定id="hdNews" 的 x-template模板
template:'#hdNewstemplate',
data(){
return {}
},
//用于接收父组件里传过来的数据,注意驼峰命名和-号命名的写法
props:['hd','css','list','showTitle'],
methods:{}
};
new Vue({
el:'#hdcms',
//绑定组件hdNews hdNews:hdNews简写成hdNews
components:{hdNews},
data:{
news:[
{id:0,title:'tpshop',num:1,show:false},
{id:1,title:'hdcms',num:1,show:false}
],
showTitle:'hello vue.',
},
});
</script>
</body>
</html>

效果:

例子二:

<!DOCTYPE html>
<html lang=”zh-cn”> <head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head> <script type=”x-template” id=”father”>
<div>
<h2 style=”color:blue”>{{hello}}</h2>
{{apptoshuaiqm}}
<childer :shuai-qmtochilder=”shuaiQmGiveMe” />
</div>
</script> <script type=”x-template” id=”childer”>
<div>
<h2 style=”color:blue”>{{hello}}</h2>
{{shuaiQmtochilder}}
</div>
</script> <body>
<div id=”app”>
<shuai-qm apptoshuaiqm=”我是app传过来的值”></shuai-qm>
</div> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script>
var childer = {
props: ['shuaiQmtochilder'],
data() {
return {
hello: 'hello i’m dawangraoming',
}
},
template: '#childer'
} var father = {
props: ['apptoshuaiqm'],// 这里大家一定要注意,请完全使用小写传参
data() {
return {
hello: 'hello world',
shuaiQmGiveMe: '我是从shuaiQm传过来的值'
}
},
template: '#father',
components: {
'childer': childer
}
} var app = new Vue({
el: '#app',
data: {
message: 'Hello World',
isTrue: true,
},
components: {
'shuaiQm': father,
}
})
</script>
</body> </html>

40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作的更多相关文章

  1. 040——VUE中组件之组件间的数据参props的使用实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 在WePY中实现了小程序的组件化开发,组件的所有业务与功能在组件本身实现,组件与组件之间彼此隔离,上述例子在WePY的组件化开发过程中,A组件只会影响到A所绑定的myclick

    wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=%e5%be%ae%e4%bf%a1%e5%b0%8f%e7 ...

  3. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  4. 【前端vue开发】vue子调父 $emit (把子组件的数据传给父组件)

    ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> <div id="app"> ...

  5. vue中父级与子组件生命周期的先后顺序

    1.vue的生命周期 2.views/createrCustormer.vue为父级     <template>     <expressService />   </ ...

  6. vue---子调父 $emit (把子组件的数据传给父组件)

    ps:App.vue 父组件  Hello.vue 子组件 ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> & ...

  7. vue 项目, 通知子组件更新,父组件中每次点击按钮重新加载子组件,(重新生成dom 元素)

    vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...

  8. vue 路由传参中刷新页面参数丢失 及传参的几种方式?

    在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...

  9. Vue 组件&组件之间的通信 之 template模板引用与动态组件的使用

    template模板引用 在component的template中书写大量的HTML元素很麻烦. Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的t ...

随机推荐

  1. $.ajax、$.post

    jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (String) : 发送请求的URL地址. data ...

  2. Java I/O模型

    本文转发自技术世界,原文链接 http://www.jasongj.com/java/nio_reactor/ 同步 vs. 异步 同步I/O 每个请求必须逐个地被处理,一个请求的处理会导致整个流程的 ...

  3. CSS改变placeholder的颜色

    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #a1a1a1; } ::-moz-placeholder { /* Mozilla ...

  4. Android Studio Git 分支实践

    新公司有些项目是用的 Git,以前公司都是 svn,为了练手 Git,我个人 APP 用到了,但是仅简单的 git pull/push 的使用,并未用到 Git 精髓,只有当项目中用到,才会紧迫去全面 ...

  5. struts 上传文件 Dynavalidatorform 实例

    一.相关jar包     一个空struts工程的jar包:    另上传文件的两个jar包: 二.页面 1.上传页面upload.jsp <%@ page language="jav ...

  6. centos7 mod_gearman 3.0.1 打包rpm

    wget https://github.com/sni/mod_gearman/archive/v3.0.1.tar.gz -O /root/rpmbuild/SOURCES/mod_gearman- ...

  7. MySQL的基础(优化)1

    1,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽可能小 2,在可能的情况下,应该尽量把字段设置为NOT NULL,这样在将来执行查询的时候,数据库不用去比较NULL值 3,对于某 ...

  8. Html : 规范html代码的网站

    html代码的规范也是很重要的,这里推荐一个网站,很好用,仓鼠是经常用的啦! https://htmlformatter.com/ 以上

  9. Docker和宿主机操作系统文件目录互相隔离的实现原理

    我们知道在Docker容器里是无法访问到宿主操作系统的文件目录的,但这种隔离是怎么实现的呢? 其实一点也不神奇--利用了Linux系统的内部命令chroot. chroot能将进程的根目录设置成任意指 ...

  10. Poj(1703),种类并查集

    题目链接:http://poj.org/problem?id=1703 已经不是第一次接触种类并查集了,直到今天才搞懂. 感谢红黑联盟,感谢杰哥!!! 每个节点只要关系确定,不管是不是同一个集合里面, ...