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这两个工具(如果有不清楚的同学 ...
随机推荐
- 6--OC--封装 继承 多态
OC中的类的三大特性类: 继承,封装,多态 一. 封装 封装就是对类中的一些字段,方法进行保护,不被外界所访问到,有一种权限的控制功能,这样我们在定义类的时候,哪些字段和方法不想暴露出去,哪些字段和方 ...
- ExtJS3.4升级ExtJS4.2的问题汇总（转）
ExtJS3.4升级ExtJS4.2的问题汇总 昨天心血来潮,想把自己用extjs3.4作为UI的一个原型升级到最新的extjs4.2.2. 几年前曾经将原型从2.1升级到3.4,对于extjs的版本 ...
- CodeForces 670 A. Holidays（模拟）
Description On the planet Mars a year lasts exactly n days (there are no leap years on Mars). But Ma ...
- 基于IDL 的WebRS系统设计图
图1 用例图 图2 结构图
- android5.0----SVG
SVG ----scalable vector Graphics 可缩放矢量图形 android L 即android 5.0的新特性. 1,SVG是干什么的? 可缩放矢量图形是基于可扩展标记语言(标 ...
- CodeForces 190D Non-Secret Cypher
双指针. #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> ...
- 使用for循环还是foreach循环？
很多时候我们很自然的认为,for循环的时候使用foreach和原来的for循环用下标的方式遍历是相同的. 而且因为foreach循环写法简单,很容易理解,而且少去了很多麻烦的变量,所以估计在学会使用f ...
- linux export将PATH环境变量误删了的解决办法
今天新增环境变量的时候不小心把冒号错打成了分号 export PATH=/usr/local/php5/bin;$PATH; 导致PATH变量为/usr/local/php/bin 解决办法:[ubu ...
- 安装apk时出现错误Failure [INSTALL_FAILED_DEXOPT]问题解决的方法
在android4.0源码里面编译出来apk后,用adb install (或adb install -r 重装)安装时,报错[INSTALL_FAILED_DEXOPT]. xu@xu-PC:~$ ...
- how to enable #ifdef macro in the command line of make?
Compilers normally use the -D flags eg Code: test.o: test.cpp $(CC) $(CFLAGS) -DTEST1 test.cpp -o $@