Vue父组件像子组件传值--自定义属性
这里有个注意的地方，Vue实例控制app DIV 大组件，我们在div中天加小组件的时候，传值需要创建自定义的属性
之后在通过props:[‘属性名’] 来把父元素data中的数据传递给子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body> <!-- 首先我们的Vue实例 控制着app 大DIV 组件，我们通过组件log 有添加了子组件 -->
<!-- 父组件可以在引用 子组件的时候，通过属性绑定（v-bind）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部
供子组件使用-->
<div class="app">
<log v-bind:parentmsg="msg"></log>
</div> <script>
// 其中Vue 也可以看作一个大组件，他里面包含了log 子组件
var vm=new Vue({
el:'.app',
data:{
msg:'访问我，你可以吗？'
},
methods: { },
components:{
log:{
// 经过演示，发现 子组件中，默认是无法访问到父组件中data上的数据和methods方法的 template:'<h1>我像访问父组件中的msg属性--------{{parentmsg}}</h1>',
// 只有props 是数组 其他的都是对象
// filters:{},components:{}diewctives:{}....... // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
// data 上的数据，都是可读可写的；
data(){
return {title:123,content:'qqqq'}
}, // 把父组件传递过来的parentmsg属性，现在props数组中，定义下，这样，才能使用这个数据
props:['parentmsg'], // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
// props 中的数据，都是只读的，无法重新赋值
}
}
})
</script>
</body>
</html>
Vue父组件像子组件传值--自定义属性的更多相关文章
- vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- vue之provide和inject跨组件传递属性值失败（父组件向子组件传值的两种方式）
简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...
- Vue 组件&组件之间的通信 之 父组件向子组件传值
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...
- vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件
Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue 父组件向子组件传值，传方法，传父组件整体
父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...
- EasyDSS RTMP流媒体服务器web前端：vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端：vue组件之间的传值，父组件向子组件传值
前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- VUe.js 父组件向子组件中传值及方法
父组件向子组件中传值 1. Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...
随机推荐
- 零基础学Python_汇总贴
https://time.geekbang.org/course/intro/98 零基础学Python-第一章 :Python介绍和安装-01.Python语言的特点 零基础学Python-第一章 ...
- Python机器学习实践指南pdf （中文版带书签）、原书代码、数据集
Python机器学习实践指南 目 录 第1章Python机器学习的生态系统 1 1．1 数据科学/机器学习的工作 流程 2 1．1．1 获取 2 1．1．2 检查和探索 2 1．1．3 清理和准备 3 ...
- spring 使用Spring表达式（Spring EL）
Spring还提供了更灵活的注入方式,那就是Spring表达式,实际上Spring EL远比以上注入方式强大,我们需要学习它.Spring EL拥有很多功能. 使用Bean的id来引用Bean. •调 ...
- 基于EasyDSS流媒体解决方案创建视频点播、短视频、视频资源库等视频播放系统
随着前端技术的不断发展,视频点播早已不再是IE6时代的浏览器嵌入式Windows Media Player.也不是后来的flash media player需要的rtmp点播流,现在能够唯一满足全终端 ...
- 【error】OutOfRangeError (see above for traceback): RandomShuffleQueue
前言 在使用tensorflow TFRecord的过程中,读取*.tfrecord文件时出现错误,本文解决这个错误. 错误描述: OutOfRangeError (see above , curre ...
- 支持“ReportDbContext”上下文的模型已在数据库创建后发生更改
支持“ReportDbContext”上下文的模型已在数据库创建后发生更改.请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/?LinkI ...
- union all 关键字的应用（合并两个查询结果集到同一个结果集）
在此对于数据库中 union all 关键字的功能和用法进行简单的使用介绍. 这是我工作中的一个需求: 有两个 A表 和B表. A表的数据: B表的数据: 现在有这样一个需求,让他一次性的全部查出来. ...
- 【bcrypt】vue项目中bcrypt安装报错
[报错] 报错时安装方法: npm install bcrypt [解决方法] npm install bcryptjs 用 bcryptjs 替换 bcrypt 即可.
- linux 给运行程序指定动态库路径
1. 连接和运行时库文件搜索路径到设置 库文件在连接(静态库和共享 库)和运行(仅限于使用共享库的程序)时被使用,其搜索路径是在系统中进行设置的.一般 Linux 系统把 /lib 和 /usr/li ...
- twemproxy配置
redis多主从,多节点,读写分离架构. nutcracker.yml的twemproxy配置 #redis_main是twemproxy所控制redis主从集群逻辑名称 redis_main: #t ...