vue的自定义组件和组件传值
<div id="app">
<div>{{pmessage}}</div> //父组件
<child :message="pmessage"></child>//打开一个通道 绑定message 用来接受数据 类似于emit
</div>
Vue.component('child',{
props:['message'], //使用props 来接收信息
template:'<h1>{{message}}</h1>' //需要暴露的信息
});
new Vue({
el:'#app',
data:{
pmessage:'' //父元素的值
}
});
props的使用。props可以是一个数组,也可以是一个对象。
let App = Vue.extend({ 定义自定义组件
template:'''<h1>hello world</h1>'
})
Vue.component('my-app',App);
let App = Vue.extend('child',{ //局部定义组件
template:'<h1>hello world</h1>'
});
new Vue({
el:'#app',
components:{ //
my-app:APP,
}
});
//==========================
new Vue({
el:'#app',
data:{},
components:{
'hello':{
template:'<h1>hello world</h1>'
}
}
});
vue的自定义组件和组件传值的更多相关文章
- vue组件之间的传值方式
一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 <!DOCTYPE html> <html lang="en"> <head> &l ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- 「Vue」父子组件之间的传值及调用方法
a.父组件向子组件传值data(){},props数据区别data中的数据可读可写,是自己的数据props是个数组,中的数据是父组件传递过来的,只读不能写<login :dmsg='msg'&g ...
- Vue组件通信(传值)
先介绍一下什么是组件把: 创建组件的两种方式: 全局组件 // 组件就是vue的一个拓展实例 let component=Vue.extend({ data(){ return{ //与vue实例中的 ...
- Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
- vue组件定义方式,vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
随机推荐
- margin auto 实现居中,与text-align:center的区别
本文导读:一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定.这些值中,只有width和margin-left,margin-right可以设为auto,text- ...
- C++STL二维vector指定位置排序
自己一直用vector 二维的存储变量 有时候需要进行排序 在此 为记录一下方法 废话少说直接上代码 #include <QCoreApplication> #include <io ...
- MySQL 5.6下table_open_cache参数合理配置详解
table_open_cache指定表高速缓存的大小.每当MySQL访问一个表时,如果在表缓冲区中还有空间,该表就被打开并放入其中,这样可以更快地访问表内容.通过检查峰值时间的状态值Open_tabl ...
- MIUI7 系统应用精简(米5、红米note3)
1.由于安装的部分应用在root后无法使用,所以自己一直不能使用MIUI的开发版本. 2.前段时间米5升级MIUI8,实在是用着不咋地,耗电,王者还掉帧,于是降级miui7 3.被逼走上了刷机路. 1 ...
- odoo学习之弹框显示
按条件隐藏: <xpath expr="//group[1]" position="attributes"> <attribute name= ...
- linux 开机进入initramfs无法开机
4/4 用fsck命令开始检查.修复(fsck是个很好用了磁盘检测修复命令)输入:fsck -t ext4 /dev/sda1 (-t是指定文件系统类型:现在的多半是ext3和ext4,不知道,你就一 ...
- jsp界面的继承与否剖析
引入页面时候 ${pageContext.request.contextPath}为页面上下文路径:也可以用js来实现: <script type="text/javascript&q ...
- Bootstrap Search Suggest 下拉框模糊查询
源码地址:https://github.com/lzwme/bootstrap-suggest-plugin 有时间会完善!暂时有点忙!
- LVM : 缩减文件系统的容量
有扩展就有缩减,我们在前文<LVM : 扩展文件系统的容量>中介绍了通过 LVM 扩展文件系统的方法,本文我们接着前文的 demo 介绍通过 LVM 缩减文件系统的方法.说明:本文的演示环 ...
- 【亲测有效】Kali Linux无法安装网易云音乐的解决方案
问题描述 由于 Kali Linux 的内核是基于 Debian 的,我们在安装网易云音乐的时候更偏向于选择安装网易云音乐 v1.1.0 deepin15(64位) 的包,可是我发现在安装过程中,无法 ...