Vue系列之 => 父组件向子组件传值
父组件向子组件传递数据
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="./lib/jquery2.1.4.min.js"></script>
10 <script src="./lib/Vue2.5.17.js"></script>
11 <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
12 </head>
13
14 <body>
15 <div id="app">
16 <!-- 父组件可以在引用子组件的时候通过属性绑定(v-bind:)的形式把
17 需要传递给子组件的数据以属性绑定的形式传递到子组件内部给子组件使用 -->
18 <com1 v-bind:parentmsg="msg"></com1>
19 </div>
20
21 <template id="mytem">
22 <div>
23 工要要地地
24 </div>
25 </template>
26 <script>
27
28 var vm = new Vue({
29 el: '#app',
30 data: {
31 msg : '123啊- 父组件中的数据'
32 },
33 methods: {
34
35 },
36 components:{
37 //经过演示，子组件中，默认无法访问到父组件中的data数据和methods方法
38 com1 : {
39 // 注意：子组件中的data数据并不是通过父组件传递过来的，而是子组件自身私有的
40 // props 中的数据都是只读的，无法重新赋值
41 //比如，子组件通过ajax请求回来的数据，都可以放到data身上
42 data(){
43 return {
44 title : '123',
45 content : 'qaq'
46 }
47 },
48
49 // template : '<h1>这是子组件 --- {{ msg }}</h1>' | msg => undefined
50 template : '<h1>这是子组件 --- {{ parentmsg }}</h1>',
51 // 注意：组件中所有的props中的数据，都是通过父组件传递给子组件的
52 //把父组件传递过来的parentmsg属性，先在props数组中定义一下这样才能使用这个数据。
53 props : ['parentmsg']
54
55 }
56 }
57
58 })
59 </script>
60 </body>
61
62 </html>
父组件向子组件传递方法
<!DOCTYPE html>
<html lang="en"> <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>
<script src="./lib/jquery2.1.4.min.js"></script>
<script src="./lib/Vue2.5.17.js"></script>
<link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
</head> <body>
<div id="app">
<!-- 父组件向子组件传递方法使用的是事件绑定机制; v-on -->
<!-- <com2 v-on:func="show"></com2> -->
<!-- 简写 -->
<com2 @func="show"></com2>
</div> <template id="tmp1">
<div>
<h1> 这是子组件</h1>
<input type="button" value="子组件的按钮" @click="myclick">
</div>
</template>
<script>
var com2 = {
template : '#tmp1',
data(){
return {
sonmsg : {name : '小头儿子' , age : 6}
}
},
methods: {
myclick(){
//当点击子组件的按钮的时候，如何获取父组件传递过来的func方法并调用这个方法
//emit英文原译是触发，调用的意思
this.$emit('func',this.sonmsg,'第三个参数')
}
},
} var vm = new Vue({
el: '#app',
data: {
sonmessage : null
},
methods: {
show(data,data2){
console.log(data);
console.log('调用了父组件上的 show 方法 ---' + data + data2)
// 把放到父组件自己的data中去
this.sonmessage = data;
}
},
// 想办法把show方法传给子组件
components : {
com2 : com2, }
})
</script>
</body> </html>
Vue系列之 => 父组件向子组件传值的更多相关文章
- vue 父组件传递子组件事件
在开发中,碰到一个需要从父组件传入方法,子组件点击触发,说白了就是,把方法传入给子组件调用 <el-col v-for='data in spreadFormat.icons' class=&q ...
- Vue中，父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
- VUE 父组件与子组件交互
1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...
- Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- Vue 组件&组件之间的通信 之 父组件向子组件传值
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...
- vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件
Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...
- vue 的父组件和子组件互相获取数据和方法
父组件主动获取子组件的数据和方法 一.ref(但不能实时更新获取) 1.调用子组件的时候 定义一个ref <child ref="headerChild"></c ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
随机推荐
- (原)kenel开机logo的制作
今天项目需要,需要制作一个kernel的开机logo,所以在rk3288的平台上进行测试一番. 第一步:配置kernel:选上CONFIG_LOGO_LINUX_CLUT224选项 make menu ...
- java.exe和javaw.exe的区别
相同点:二者都是Java的虚拟机,用来执行Java程序 区别: 1. javaw.exe运行程序时不会输出控制台信息 (注:“w”就是window的意思). 使用案例 start.bat(y以下代码 ...
- .net framework 项目 build 出现 未能加载文件或程序集“netfx.force.conflicts”或它的某一个依赖项
问题描述 Severity Code Description Project File Line Suppression State Error 未能加载文件或程序集"netfx.force ...
- DB2隔离级别之RR/RS/CS/UR
1.RR隔离级别:在此隔离级别下. DB2会锁住全部相关的纪录. 在一个SQL语句运行期间, 全部运行此语句扫描过的纪录都会被加上对应的锁.在一个SQL语句运行期间,全部运行此语句扫描过的纪录都会 ...
- JAVA用QRCode生成二维码
QRCode jar下载地址: 生成:http://www.swetake.com/qrcode/index-e.html 读取:https://zh.osdn.net/projects/qrcode ...
- python中unicode 和 str相互转化
python中的str对象其实就是"8-bit string" ,字节字符串,本质上类似java中的byte[]. 而python中的unicode对象应该才是等同于java中的S ...
- 进程池的回调函数callback
如下代码: from multiprocessing import Pool def func1(n): print('in func1') return n*n def func2(nn): pri ...
- oracle 存储过程分页
将分页的存储过程封装到包中,包规范 create or replace package pkg_query as type cur_query is ref cursor; PROCEDURE prc ...
- linux 系统全盘备份
备份程序对比 - Synchronization and backup programs 之前用的 tar进行备份了,更新 grub引导需要重建目录和手动挂载,不是很方便.现直接使用 timeshif ...
- 【登录异常解决】Ubuntu 输入正确的密码后重新返回到登陆界面
症状 Ubuntu 输入正确的密码后,黑屏一闪,重新返回到登陆界面. 原因一:主目录下的.Xauthority文件拥有者变成了root,从而以用户登陆的时候无法都取.Xauthority文件.说明:X ...