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的 ...
随机推荐
- 树莓派3b安装Apache2+PHP+MySQL+phpyadmin
树莓派型号:3B+ 系统环境:2017-04-10-raspbian-jessie 先更新一下源 BASIC sudo apt-get update 安装Apache2 BASIC sudo apt- ...
- js == 与 === 的区别[转]
we文章转自http://blog.sina.com.cn/s/blog_4b32835b01014iv9.html 1.对于string,number等基础类型,==和===是有区别的 1)不同类型 ...
- Mysql数据库的加密与解密
数据加密.解密在安全领域非常重要.对程序员而言,在数据库中以密文方式存储用户密码对入侵者剽窃用户隐私意义重大. 有多种前端加密算法可用于数据加密.解密,下面我向您推荐一种简单的数据库级别的数据加密.解 ...
- patch函数的解释2
patch 创建补片图形对象 句法: patch(X,Y,C) patch(X,Y,Z,C) patch(FV) patch(...'PropertyName',propertyvalue...) p ...
- QT数据类型的转化总结
QT 中的数据类型有很多的,在写代码的过程中难免会遇到 数据类型的转换. 1.QString转QByteArray QByteArray byte;QString string;byte = stri ...
- Android学习之基础知识十二 — 第一讲:网络技术的使用
这一节主要讲如何在手机端使用HTTP协议和服务器端进行网络交互,并对服务器返回的数据进行解析,这也是Android中最常用的网络技术. 一.WebView的用法 有时候我们可能会碰到比较特殊的需求,比 ...
- ESP8266开发综合篇(LUA开发-视频教程总揽)
为了解决基础教程简单入门但不实用,项目方案非常实用但比较难的问题,开始推出8266开发综合篇 综合篇涉及到AT,LUA,SDK,LUA(sdk)开发,LUA和SDK开发会同步进行,后期再整理AT指令的 ...
- ORA-10858:在要求输入数字处找到非数字字符
今天在写sql语句的时候,运行报错:ORA-10858:在要求输入数字处找到非数字字符 在网上查了一下为什么会有这种错误,有一个建议是可能是写的sql语句中的日期没有处理.仔细看了一下自己写的代码 就 ...
- 微信小程序 wx.getUserInfo 解密 C# 代码 - 转
public static string DecodeUserInfo(string raw, string signature,string encryptedData, string iv) { ...
- flask-script&flask-migrate使用
一.简介 Flask-script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell.设置数据库的脚本.cronjobs及其他运行在web应用之外的 ...