<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. 字典树模板题(统计难题 HDU - 1251)

    https://vjudge.net/problem/HDU-1251 标准的字典树模板题: 也注意一下输入方法: #include<iostream> #include<cstdi ...

  2. Linux运维故障排查思路

    linux系统故障 网络问题 linux系统无响应 linux系统无法启动 linux系统故障处理思路 1.重视报错信息,一般情况下此提示基本定位了问题的所在 2.查阅日志文件,系统日志和应用日志 3 ...

  3. 利用git向github上远程提交一个自己的开源项目

    1.在电脑的系统变量中的path路径中配置git的环境变量: 找到git安装路径中bin的位置,如:X:\Git\bin 找到git安装路径中git-core的位置,如:X:\Git\libexec\ ...

  4. Oracle存储过程的调试

    在工作汇总有时候程序会调用存储过程来实现某些功能,因为这样的话,速度更快.所以学习如何调试存储过程就非常的重要. 首先,打开PLSQL DEVELOPMENT首先介绍一下,这个软件的各个窗口是用来干什 ...

  5. 创建一个宽高成比例的弹性div盒子

    这里先提供一种,有更好的方法再补充. demo代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  6. Ionic Contoller类与Service类分开需要注意的问题

    看了别人的项目把Controller类和Service类都写在了app.js文件里面,这不符合我的风格,想把他们分开成单独的文件,确遇见以下错误提示: ionic.bundle.min.js:133 ...

  7. Luogu P2002 消息扩散&&P1262 间谍网络

    怕自己太久没写Tarjan了就会把这种神仙算法忘掉. 其实这种类型的图论题的套路还是比较简单且显然的. P2002 消息扩散 很显然的题目,因为在一个环(其实就是强连通分量)中的城市都只需要让其中一个 ...

  8. Luogu P1439 【模板】最长公共子序列

    又是模板题呵,但这次的难度有点增加. 先看题目第一个想到DP的经典算法,要O(n^2),然后想其它的算法. 其实我们衢州市一次联考有一题很像这题,不过还要难一点. 思想是离散化+最长不下降子序列(在这 ...

  9. C#_Attribute特性

    [AttributeUsage(AttributeTargets.All)]//指定Attribute的使用范围,比如只能在class级别使用 public class Column : Attrib ...

  10. sudo 与输出重定向

    本文介绍如何使用 sudo 将输出重定向到当前用户没有权限的文件.注意:本文中 demo 的演示环境为 ubuntu 18.04. Permission denied 问题 如果当前用户没有某个文件的 ...