<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. Usaco 2019 Jan Platinum

    Usaco 2019 Jan Platinum 要不是昨天老师给我们考了这套题,我都不知道usaco还有铂金这么一级. 插播一则新闻:杨神坚持认为铂金比黄金简单,原因竟是:铜 汞 银 铂 金(金属活动 ...

  2. mysql索引优化-order/group

    为排序使用索引 KEY a_b_c (a,b,c) order by 能使用索引最左前缀 -order by a -order by a,b -order by a,b,c -order by a d ...

  3. 说明split()与join()函数的区别?

    前者是切割成数组的形式,后者是将数组转换成字符串join函数获取一批字符串,然后用分隔符字符串将它们连接起来,从而返回一个字符串.Split函数获取一个字符串,然后再分隔符处将其断开,从而返回一批字符 ...

  4. gas问题out of gas的解决

    1.昨天遇见了还是以前遇见的问题,就是发现有些函数就是不能用web3调用,然后怎么弄都写不到数组上,但是今天终于将它解决了web3的学习:https://github.com/ethereum/wik ...

  5. spring的@Transaction使用注意

    文章参考资料 https://www.cnblogs.com/andy-zhou/p/5317866.html http://labreeze.iteye.com/blog/2277261 Sprin ...

  6. Java内存区域划分、内存分配原理(转)

    文章引用自 http://blog.csdn.net/OyangYujun/article/details/41173747 运行时数据区域 Java虚拟机在执行Java的过程中会把管理的内存划分为若 ...

  7. node.js取参四种方法req.body,req.params,req.param,req.body

    参考:https://my.oschina.net/u/2519530/blog/535309 获取请求很中的参数是每个web后台处理的必经之路,nodejs的 express框架 提供了四种方法来实 ...

  8. Python将数据渲染到docx文档指定位置

    超简单Python将指定数据插入到docx模板渲染并生成 最近有一个需求,制作劳动合同表,要从excel表格中将每个人的数据导入到docx劳动合同中,重复量很大,因此可以使用python高效解决.为了 ...

  9. 更换apt-get官方源为163源

    更换apt-get官方源为163源 1.# mv /etc/apt/sources.list /etc/apt/sources.list.bak 2.覆盖原来源文件 tee /etc/apt/sour ...

  10. (转)Linux SSH配置和禁止Root远程登陆设置

    原文 一.修改vi /etc/ssh/sshd_config 文件 1.修改默认端口:默认Port为22,并且已经注释掉了:修改是把注释去掉,并修改成其它的端口. 2.禁止root用户远程登陆:修改P ...