<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的自定义组件和组件传值的更多相关文章

  1. vue组件之间的传值方式

    一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 <!DOCTYPE html> <html lang="en"> <head> &l ...

  2. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  3. 「Vue」父子组件之间的传值及调用方法

    a.父组件向子组件传值data(){},props数据区别data中的数据可读可写,是自己的数据props是个数组,中的数据是父组件传递过来的,只读不能写<login :dmsg='msg'&g ...

  4. Vue组件通信(传值)

    先介绍一下什么是组件把: 创建组件的两种方式: 全局组件 // 组件就是vue的一个拓展实例 let component=Vue.extend({ data(){ return{ //与vue实例中的 ...

  5. Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  6. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  7. EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...

  8. vue组件定义方式,vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  9. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...

随机推荐

  1. 【洛谷】【最小生成树】P1536 村村通

    [题目描述:] 某市调查城镇交通状况,得到现有城镇道路统计表.表中列出了每条道路直接连通的城镇.市政府"村村通工程"的目标是使全市任何两个城镇间都可以实现交通(但不一定有直接的道路 ...

  2. 转://oracle 重新编译用户无效对象

    select owner,object_name, replace(object_type,' ','') object_type,to_char(created,'yyyy-mm-dd') as c ...

  3. PHP获取目录下面所有文件和文件夹

    如果做一个在线的文件管理系统的话,那么首先必须知道怎么读取目录和文件,其实这个功能几行代码就可以实现了. <?php $dir = "D:/";  //要获取的目录 echo ...

  4. P1823 [COI2007] Patrik 音乐会的等待 单调栈 洛谷luogu

    题目描述 N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人.队列中任意两个人A和B,如果他们是相邻或他们之间没有人比A或B高,那么他们是可以互相看得见的. ...

  5. 网易云音乐 歌词制作软件 BesLyric (最新版本下载)

    导读 BesLyric , 一款专门制作 网易云音乐 LRC 滚动歌词的软件! 搜索.下载.制作 歌词更方便! 哈哈,喜欢网易云音乐,又愁于制作歌词的童鞋有福啦!Beslyric 为你排忧解难! 本文 ...

  6. python 日志

    logger.conf 配置文件 #logger.conf ############################################### [loggers] keys=root,ex ...

  7. python 对时间操作

    from datetime import datetime,timedelta 'date_test':fields.function(_datetime_all,type='datetime',  ...

  8. JavaWeb学习总结-12 JSTL标签语言

    一 JSTL JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签. 除了 ...

  9. SRP周记_20190418

    SRP的全名是Student research project (我猜的),对于部分学生来说,不做就相当于不能毕业,一个project大概做一年左右,算是我工的一个特色.本人参加的SRP是做一个编译原 ...

  10. [Oacle][Partition]Partition操作与 Index, Global Index 的关系

    [Oacle][Partition]Partition操作与 Index, Global Index 的关系: ■ Regarding the local index and the global i ...