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 ...
随机推荐
- WordPress 安装插件导致 HTTP 500 内部服务器错误的问题
春节这几天忙着过节,一直没有看网站,今天登陆上来看到插件有更新,点开更新后,悲剧发生了.页面就无法加载,出现错误无法加载了,着实让我慌了慌(想到重来就郁闷) Chrome:该网页无法正常工作www ...
- python中MetaClass的一些用法
元类在很多编程语言中都有这样的概念,我们都知道,类可以创建对象,类本身也是对象,既然是对象,那么它肯定也是被创造出来的,元类就专门用来创造类对象,于是,这就给我们提供了一种操纵或者监听类的能力. 平时 ...
- spingboot中的美女banner.txt
.::::. .::::::::. ::::::::::: ..:::::::::::' '::::::::::::' .:::::::::: '::::::::::::::.. ..:::::::: ...
- 自定义GridView实现分割线解析
前两天在些项目的时候碰到常用的GridView要实现一些分割线,之前就是用本方法利用listView和Item的背景颜色的不同线显示分割线.这是最low的一种做法.于是我就简单的写了一个自定义的 Gr ...
- windows下设置PHP环境变量
1.找到“高级系统设置”(二选一的方法找到环境变量) ① 我的电脑-属性-高级-环境变量 ②win8,10 直接在搜索框搜 “查看高级系统设置”-环境变量 2.找到变量"Path" ...
- linux中，当执行rpm -e删除一个软件包时，都做了些什么事
问题描述: 今天在通过rpm进行删除软件包时,出现了问题,就引发了我对于rpm包执行删除动作时的一些行为做了思考,之前找了很多的文章,后来想如果有debug日志信息,那么不就都清楚了吗 通过打印rpm ...
- 2单一职责原则SRP
一.什么是单一职责原则 单一职责原则(Single Responsibility Principle ): 就一个类而言,应该仅有一个引起它变化的 原因. 二.多功能的山寨手机 山寨手机的功能: 拍照 ...
- HTTP Headers 信息
点开一个条目,可以查看请求的详细信息: General —— 通用信息 Request URL:请求的URL Request Method:请求的方法 Status Code:响应状态 ...
- fidder（介绍）
处处用到网络抓包 “君子生非异也,善假于物也”,要做好测试很多时候光靠自己是远远不够的,还要会利用测试工具协助测试,这样才能事半功倍. 测试工具多种多样,会在本系列中一一介绍,今天着重介绍网络抓包工具 ...
- thymeleaf(二）
项目demo http://pan.baidu.com/s/1wg6PC 学习资料网址 http://www.blogjava.net/bjwulin/archive/2013/02/07/ ...