vue.js_09_vue-父子组件的传值方法
1.父向子传递数据
1>定义一个父组件和一个子组件
2>父组件通过v-bind绑定传递的数据 :parentmsg="msg"
3>子组件需要通过 props:['']来接收数据 props: ['parentmsg'],
<body>
<div id="app">
<comp1 :parentmsg="msg"></comp1>
</div> <template id="tmpl1">
<div>
<h1>这是子元素--{{parentmsg}}</h1>
</div>
</template>
<script>
var comp1 = {
template: '#tmpl1',
props: ['parentmsg'],
}
var vm = new Vue({
el: '#app',
data: {
msg: '我是父组件中的数据',
},
components: {
comp1
}
})
</script>
</body>
2.子向父传递数据
1>子组件通过一个触发一个事件来调用向父组件传递数据的方法 @click="sendMsg"
2>通过 this.$emit('func',this.msg) 传递数据给父组件 来调用父组件上绑定的方法 @func="getMsgFromSon"
3>通过方法拿到子组件传递过来的数据
methods: {
getMsgFromSon(data){
this.msgSon=data
}
},
<body>
<div id="app">
<comp1 :parentmsg="msg" @func="getMsgFromSon"></comp1>
<h1>{{msgSon}}</h1>
</div> <template id="tmpl1">
<div>
<h1>这是子元素</h1>
<input type="button" value="向父组件传递消息" @click="sendMsg"/>
</div>
</template>
<script>
var comp1 = {
template: '#tmpl1',
props:['parentmsg'],
data(){
return{
msg:'我是子组件中的数据'
}
},
methods:{
sendMsg(){
this.$emit('func',this.msg)
}
}
}
var vm = new Vue({
el: '#app',
data: {
msg:'我是父组件中的数据',
msgSon:''
},
methods: {
getMsgFromSon(data){
this.msgSon=data
}
},
components: {
comp1
}
})
</script>
</body>
vue.js_09_vue-父子组件的传值方法的更多相关文章
- vue中非父子组件的传值bus的使用
非父子之间的组件传值,可以使用vuex.简单的状态管理,也可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定 ...
- Vue.js父子组件如何传值 通俗易懂
父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建pr ...
- 关于Vue中父子组件相互传值
Header为子组件,Home为父组件,通过子组件调用父组件 运行结果如下 下面是父组件调用子组件的案例 通过button按钮的click事件 图一是父组件Home中的run方法,图二是msg和fun ...
- Vue父子组件相互传值及调用方法的方案
Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...
- vue父子组件的传值总结
久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...
- vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- Vue中非父子组件传值的问题
父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...
- vue.js单文件组件中非父子组件的传值
最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...
随机推荐
- javascript和jquery
JavaScript 1.概述 JavaScript是一种基于对象和事件驱动,并具有安全性能的脚本语言. 2.语法 HTML 中的脚本必须位于 <script> 与 </script ...
- [JZOJ 5782] 城市猎人
思路: 并查集按秩合并维护出现时间. 最早连接时间就是树上连接最大值. \(qwq\)我居然把路径压缩和按秩合并打到一个程序里了...OvO #include <bits/stdc++.h> ...
- 【题解】P1440 均分纸牌
均分纸牌 题目描述: 有\(N\)堆纸牌,编号分别为\(1,2,-,N\).每堆上有若干张,但纸牌总数必为\(N\)的倍数.可以在任一堆上取若干张纸牌,然后移动. 移牌规则为:在编号为\(1\)堆上取 ...
- iOS开发之SceneKit框架--SCNLight.h
1.SCNLight简介 用于添加光源,连接到一个节点照亮现场,可以给场景添加不同的灯光,模拟逼真的环境. 2.四种灯光的简介 添加一个box立方体.一个tube圆柱管道和一个地板floor,没有灯光 ...
- Java代码启动/关闭进程
ProcessBuilder builder = new ProcessBuilder(命令,参数,参数...); Process process = builder.start(); br = ne ...
- node环境下安装vue-cli
一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...
- springboot跨域访问
写一个WebMvc配置类重写addCorsMappings即可 @Configuration public class MyMvcConfig implements WebMvcConfigurer ...
- iOS开发系列-Block本质篇
概述 在iOS开发中Block使用比较广泛,对于使用以及一些常规的技术点这里不再赘述,主要利用C++角度分析Block内部数据底层实现,解开开发中为什么这样编写代码解决问题. Block底层结构窥探 ...
- index方法用于数据集的强制索引操作
index方法为3.2.3版本新增,用于数据集的强制索引操作,例如: $Model->index('user')->select(); 对查询强制使用user索引,user必须是数据表实际 ...
- laravel框架中使用QueryList插件采集数据
laravel框架中使用queryList 采集数据 采集数据对我们来说真家常便饭,那么苦苦的写正则采集那么一点点东西,花费了自己大把的时间和精力而且没有一点技术含量,这个时候就是使用我们的好搭档Qu ...