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 ...
随机推荐
- 使用git创建与合并分支
一.概述 学会使用git命令对项目进行创建分支,并在创建结束后合并到主分支上. 问:为什么要创建分支? 答:在原来的分支上创建一个自己的分支进行开发,在开发完毕后一次性合并到原先的分支,这样既保证安全 ...
- 同样：Hashtable较HashMap也是如此。
练习: ① 存车位的停开车的次序输出问题: ② 写两个线程,一个线程打印1-52,另一个线程答应字母A-Z.打印顺序为12A34B56C……5152Z.通过使用线程之间的通信协调关系. 注:分 ...
- Jquery EasyUI Combotree只能选择叶子节点且叶子节点有多选框
Jquery EasyUI Combotree只能选择叶子节点且叶子节点有多选框 Jquery EasyUI Combotree单选框,Jquery EasyUI Combotree只能选择叶子节点 ...
- go关键字之struct定义声明方式
type Student struct{ name string age int } var stu Student stu.name,stu.age = "张三”,10 stu2 := S ...
- shell模板-跨目录执行，彩色输出，临时文件，行遍历文件
参数检查 #!/bin/bash set -e if [ ! -n "$1" ];then echo "Usage: #cmd <> []" exi ...
- Linux 的基本操作（系统的安装）
操作系统的安装: 操作系统的安装 这次安装系统也是基于CentOS的安装.把光盘插入光驱,设置bios光驱启动.进入光盘的欢迎界面. 其中有两个选项,可以直接按回车,也可以在当前界面下输入 linux ...
- Ubantu 好玩以及有用的命令
1.cowsay 图像 Dell:~$ sudo apt-get install cowsay Dell:~$ cowsay -f elephant-in-snake 00 Dell:~$ cowsa ...
- maven deploy 上传jar包到私有仓库
mvn \ deploy:deploy-file \ -DgroupId=com.weibo.datasys \ -DartifactId=data-flow \ -Dversion=2.0.0 \ ...
- java Api 读取HDFS文件内容
package dao; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.*; import java ...
- ERP项目实施记录09
今天报价软件测试版本出来了,可看上去不怎么像是一款报价的软件,整个界面上都没有"报价"相关的字眼: 软件标题就不说了,反正影响不大,就当没看见,可左边这一大片菜单里也找不到和报价有 ...