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的 ...
随机推荐
- luogu P1858 多人背包
嘟嘟嘟 既然让求前\(k\)优解,那么就多加一维,\(dp[j][k]\)表示体积为\(j\)的第\(k\)优解是啥(\(i\)一维已经优化掉了). 考虑原来的转移方程:dp[j] = max(dp[ ...
- tomcat8_java1.8 基础镜像
需要解决的越来越多, 基础镜像中 添加 cronolog功能,用于切割catalina.out 日志. 思路是: cephfs 挂载在node节点, crontab 删除 几天的tomcaat 日志. ...
- Python3 环境搭建
Window 平台安装 Python: 以下为在 Window 平台上安装 Python 的简单步骤. 打开 WEB 浏览器访问 https://www.python.org/downloads/wi ...
- maven中的mirrors
文章转自http://blog.csdn.net/technologyboy/article/details/17143641 简单点来说,repository就是个仓库.maven里有两种仓库,本地 ...
- Linux中进程与线程的概念以及区别
linux进程与线程的区别,早已成为IT界经常讨论但热度不减的话题.无论你是初级程序员,还是资深专家,都应该考虑过这个问题,只是层次角度不同罢了.对于一般的程序员,搞清楚二者的概念并在工作中学会运用是 ...
- Python实现杨辉三角,超详细!
巧妙实现杨辉三角代码 def triangles(): N=[1] #初始化为[1],杨辉三角的每一行为一个list while True: yield N #yield 实现记录功能,没有下一个ne ...
- 关于ELK
官方文档:https://www.elastic.co/guide/en/elasticsearch/reference/6.0/getting-started.html 日志: https://ww ...
- Objective-C @executable_path、@loader_path和@rpath
工程配置中,有三个路径和库的加载息息相关: 1.@executable_path 可执行文件的路径,例如/Applications/WeChat.app/Contents/MacOS. 2.@load ...
- 【Codeforces 1137A】Skyscrapers
Codeforces 1137 A 题意:给一个矩阵,问对于每一个格子\((x,y)\),把第\(x\)行和第\(y\)列的值取出,要求将它们每一个赋上一个正整数,要求同一行.列中大小关系依然相同,问 ...
- eclipse 如何引入本地dtd
一.首先修改xml的打开方式为:XML editor 1.菜单:Window -> Preferences ->General -> Editors -> File Asso ...