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 ...
随机推荐
- C语言socket编程
建议先去看一下思路 真的写的很不错呦~ 思路参考博客:https://www.cnblogs.com/renfanzi/p/5713054.html linux c语言socket编程代码(单一服务端 ...
- Android用户点击返回按钮两次退出整个APP
最近的APP项目有一个需求就是连续点击两次返回按钮,退出整个APP,而不是返回到上一个页面,这个连续是有时间限制的,在我的项目里,我设置成2秒钟,如果两秒之内点击了两次,就代表用户想要退出整个APP, ...
- [hbase] hbase 基础使用
一.准备 hadoop 2.8.0 (提前配置好) hbase 1.2.6 zookeeper 3.4.9 (配置完成) jdk1.8 hadoop 集群信息: zk集群: 二.安装配置 1.下载(官 ...
- KafkaManager对offset的两种管理方式
OffsetManager主要提供对offset的保存和读取,每个broker都有一个OffsetManager实例,kafka管理topic的偏移量有2种方式: 1.ZookeeperOffsetM ...
- Spring data Jpa,Mybatis,读写锁,@Lock 使用
Spring data jpa 支持注解式的读写锁(悲观锁),实际上这个东西硬编码也简单,但是基于Jpa 命名方式定义的Sql,只能用注解添加支持读写锁了, 不了解读写锁的可以点这里 mysql读写锁 ...
- centos 7 rpm方式安装mysql
一.下载rpm 二.安装 1.用rz上传到centos上,目录为/home/upload 2.解压 tar -xvf mysql-5.7.25-1.el7.x86_64.rpm-bundle.tar ...
- Xshell正编辑文件时掉线，需再次正常编辑解决办法
E325: ATTENTION Found a swap file by the name ".weather.py.swp" owned by: pi dated: Mon No ...
- vue的事件对象，方法执行
方法都写在methods重,有两种写法:1. getMsg:function(){ alert(); }, 这种写法就是对象中的方法 2. getMsg1(){ alert(); }注意没有func ...
- [ERROR] - Error reading string. Unexpected token: StartObject. Path 'formData', line 1, position 13.
公司流程框架: businessData 为 string 所有要使用JSON.stringify();
- Mycat了解下
首先说下,因为本身不怎么推荐中间件,所以我对这东西也只是了解,业内mycat用的最好的应该顺风算一个,但是他们是做过二次开发的,咱菜鸡比不了,据说最近出来一个叫cetus的还不错,有空可以关注下 Ⅰ. ...