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这两个工具(如果有不清楚的同学 ...
随机推荐
- IDL 遍历 XML文档示例
IDL解析XML文档同样也有2种方法:DOM和SAX方式:两种方法在IDL自带的帮助里面有详细介绍,可以去查看. IDL 源码PRO sample_recurse, oNode, indent COM ...
- 使用JavaCV/OpenCV抓取并存储摄像头图像
http://blog.csdn.net/ljsspace/article/details/6702178 分类: 图形图像(3) 版权声明:本文为博主原创文章,未经博主允许不得转载. 本程序通过 ...
- input text设置字体
控件里设置: style="font-family:Arial" html里设置 <font face="Arial">
- 以前的loginUI
的 <%@ page language="java" pageEncoding="UTF-8"%> <%@ include file=&quo ...
- JSP内置对象--application对象(getRealPath(),getAttributeNames(),getContextPath())
application对象是javax.servlet.ServletContext接口的实例化对象.是整个servlet的上下文,代表了整个web容器的操作. 常用方法: 1.java.lang.S ...
- Ubuntu系统如何修改主机名
1.执行命令 hostname temp_name 这样主机名就改掉了.只不过重启后名字会恢复不一定使我们想要的.机器重启后会重新去读取/etc/hostname里面存储的主机名.所以如果想永久改掉的 ...
- 使用VNC远程管理VPS（Centos系统）
首先安装桌面环境,我选择的是xfce,轻量级桌面,小巧实用不占太多内存,(占用内存方面,xfce<kde,kde<gnome). centos默认源里面没有xfce,首先安装epel源,然 ...
- JSON & XML 简析
转载自:http://my.oschina.net/aofe/blog/269260 JSON: XML: JSON格式说明: HTML & XML 的对比 HTML: XML: HTML5新 ...
- error=11, Resource temporarily unavailable
问题1:Cannot run program "/bin/ls": error=11, Resource temporarily unavailable 1 15/04/22 14 ...
- Android---->RelativeLayout相对对齐方式布局
main.xml应用布局分析 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...