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 ...
随机推荐
- linux下怎样批量更改文件后缀名
今天又有同学问linux下怎样批量更改文件后缀名,这个问题被别人问到三次了,所以这里给出几个解决方法 一.rename解决 1. Ubuntu系统下 rename 's//.c//.h/' ./* ...
- java web (sevlet)请求之get,post,forward，redirect
[参考]web请求之get,post,forward,redirect 1,form表单:可以采用post或者get请求,客户端主动跳转,url地址会改变为提交后的地址 2,forward:forwa ...
- mysql 表分区技术
表分区,是指根据一定规则,将数据库中的一张表分解成多个更小的,容易管理的部分.从逻辑上看,只有一张表,但是底层却是由多个物理分区组成. 表分区有什么好处: a.分区表的数据可以分布在不同的物理设备上, ...
- Java代码中解压RAR文件
import java.io.File; import java.io.FileOutputStream; import de.innosystec.unrar.Archive; import de. ...
- springmvc date
数据格式化,从本质上讲属于数据转换的范畴.Spring就是基于数据转换框架植入“格式化”功能的. 在数据转换时我们进行了如下配置: 我们使用的是ConversionServiceFactoryBean ...
- C# 移除Response Header，403调整返回为404Make IIS return a 404 status code instead of 403
Server Information Revealed For the benefit of those who land here through a google/bing search:: He ...
- Java接口的幂等性设计
转载:https://www.cnblogs.com/jack87224088/p/8688948.html 在微服务架构下,我们在完成一个订单流程时经常遇到下面的场景: 一个订单创建接口,第一次调用 ...
- PHP 合并有序数组
<?php //两个有序数组合并 $arr1 = [1,5,7,44,66,89]; $arr2 = [4,5,6,88,99,105,111]; $arr3 = []; $l1 = count ...
- Linux Tomcat8 启动堆内存溢出
今天在部署一个开源项目的时候,Tomcat8启动异常,报错信息: Exception in thread "RMI TCP Connection(idle)" java.lang. ...
- gitlab服务器IP调整后修改domian或ip
背景 本地搭建的gitlab 服务器,在 /etc/gitlab/gitlab.rb 中 external_url 通常是局域网ip的形式.如下所示 external_url 'http://192. ...