vuejs 子组件传递父组件的第二种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-dmeo</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="page">
<hellow></hellow>
{{arr|json}}
</div>
<script type="text/javascript" src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
var handle= function(){
var hellow = {
template:"<div style='color:#f00;text-align:center;'><input type='text' v-model='mess' /><button @click='csend()'>点击</button>{{mess}}</div>",
data:function(){
return {
mess:''
}
},
methods:{
csend:function(){
if(this.mess.trim()){
this.$dispatch('handleIt',this.mess)
this.mess='';
}
}
}
}
return new Vue({
el:"#page",
data:{
arr:[],
},
methods:{
},
events:{
"handleIt":function(msg){
this.arr.push(msg);
}
},
components:{
hellow:hellow,
}
})
}()
</script>
</body>
</html>
vuejs 子组件传递父组件的第二种方式的更多相关文章
- vuejs 子组件传递父组件的第一种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vuejs子组件向父组件传递数据
子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang=" ...
- vue 父向子组件传递数据，子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- vue子组件向父组件传递参数的基本方式
子组件: this.$emit('transferUrl', this.picUrl) 父组件: 引入子组件<pics @transferUrl="gettransferUrl&quo ...
- Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vuejs利用props，子组件修改父组件的数据，父组件修改子组件的的数据，数据类型为数组
博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...
- vue2.0 子组件和父组件之间的传值（转载）
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- Vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
随机推荐
- java类对象
不错的文章 原文地址:(转载)java中的Class类与Class对象作者:albert1017 本文用作笔记之用,引用的网上资料: http://www.blogjava.net/formatmys ...
- Android开发之如何保证Service不被杀掉（broadcast+system/app）
序言 最近项目要实现这样一个效果:运行后,要有一个service始终保持在后台运行,不管用户作出什么操作,都要保证service不被kill,这可真是一个难题.参考了现今各种定制版的系统和安全厂商牛虻 ...
- 1.2 selenium IDE录制脚本
1.打开Firefox浏览器中 selenium IDE
- 打开jsp页面自动加载多个Action的实现方法
平时我们加载Action的时候都是提交表单,或者点击按钮以后才能发起Action请求. 现在我要实现一个功能:打开一个网站的首页从数据库中立刻读取多条不同表中的数据显示在页面上.这个时候要发起多个Ac ...
- 遍历Map key-value的两种方法
以前遍历Map key-value比较习惯的方式是先获取Map中的所有key值,然后根据key,依次从Map中去数据,基本方式如下: Map<String,String> testData ...
- CodeForces 139C Literature Lesson（模拟）
这个题,读懂了就是水,读不懂就没办法下手,论英语阅读的重要性...只有五种形式,第一种万能型aaaa,是另外3种的特殊情况,第二种克莱里林四行打油诗aabb形式,第三种是交替的abab形式,第四种是封 ...
- WebDriver(Selenium2) 根据新窗口title切换窗口
http://uniquepig.iteye.com/blog/1559321 在webdriver官方的api中,切换窗口的方法提供的参数是nameOrHandle. 引用 http://uniqu ...
- Xcode之Alcatraz
Alcatraz的安装和使用 转发:http://www.cnblogs.com/wendingding/p/4964661.html 一.简单说明 Alcatraz 是一款 Xcode的插件管理工具 ...
- C#设置word段落首行缩进为0
PublicVar.m_WordApp.Selection.ParagraphFormat.CharacterUnitFirstLineIndent = ; PublicVar.m_WordApp.S ...
- 2016"百度之星" - 资格赛（Astar Round1） Problem B
规律题,斐波那契数列,数据有毒,0的时候输出换行.会爆longlong,写个大数模板或者Java搞. import java.io.BufferedInputStream; import java.m ...