<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. 基于Redis的INCR实现一个限流器

    模式:计数器 计数器是 Redis 的原子性自增操作可实现的最直观的模式了,它的想法相当简单:每当某个操作发生时,向 Redis 发送一个 INCR 命令. 比如在一个 web 应用程序中,如果想知道 ...

  2. 20145203盖泽双《网络对抗技术》实践五:MSF基础应用

    20145203盖泽双<网络对抗技术>实践五:MSF基础应用 1.实践目标 掌握metasploit的基本应用方式,掌握常用的三种攻击方式的思路.下面是我自己做的时候用的四个套路. (1) ...

  3. zabbix_agent安装

    #!/bin/bash#by Charon2Pluto#(linux)ML=`df |awk '{print $2,$NF}'|sort -n|tail -1|awk '{print $2}'` if ...

  4. Oracle数据库查询优化(上百万级记录如何提高查询速度)

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引.2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引 ...

  5. CVE-2018-14424 use-after-free of disposed transient displays 分析报告

    漏洞描述 GDM守护进程不能正确的取消导出在D-Bus 接口上已经被销毁的display对象,这造成本地用户可以触发UAF,从而使系统崩溃或造成任意代码执行. 调试环境 gdm版本: 3.14.2(通 ...

  6. ubuntu 系统升级 cmake

    由于Ubuntu14.04的cmake版本为2.8.x,而如果需要cmake3.x版本时,无法生成makefile,有两种方法可以安装cmake3.4.1: 方法1: sudo apt-get ins ...

  7. java中使用jxl读取excel中的数据

    package bboss; import java.io.File; import java.io.FileInputStream; import java.io.IOException; impo ...

  8. vba 弹框

    '第三个按钮,上传数据到数据库 Private Sub CommandButton1_Click() str1 = "abcde" str2 = InputBox("请输 ...

  9. 在属性property做一些简单的验证

    开发C#的程序,写到属性property时,我们可以在Set方法中做一些简单的规则验证: 如下面,Insus.NET写一个Age属性,只允许用户输入10以内的数字: class AA { privat ...

  10. 表单验证(AngularJs)

    这次,学习angularjs的表单的验证,angularjs提供上表几种状态验证: 状态 描述 $invalid 未通过验证 $valid 经过验证 $pristine 未修改过 $dirty 修改 ...