第六章 组件 63 组件传值-父组件向子组件传值和data与props的区别
<!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>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
</head> <body>
<div id="app">
<!-- 父组件，可以在引用组件的时候，通过属性绑定（v-bind:）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
<com1 v-bind:parentmsg="msg"></com1>
</div> <script>
//创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
msg:'123 啊-父组件中数据'
},
methods:{},
components:{
//结论：经过演示，发现，子组件中，默认无法访问到 父组件中的data上的数据和methods 中的方法
com1:{
data(){//注意：子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过Ajax，请求回来的数据，都可以放到data身上；
//data上的数据，都是可读可写的；
return{
title:'123',
content:'qqq'
}
},
template:'<h1 @click="change">这是子组件---{{parentmsg}}</h1>',
//注意：组建中的所有props中的数据，都是通过父组件传递给子组件的
//props 中的数，都是只读的，无法重新赋值
props:['parentmsg'],//把父组件传递过来的parentmsg 属性，先在props数组中，定义一下，这样，才能使用这个数据 methods:{
change(){
this.parentmsg='被修改了'
}
}
}
}
});
</script>
</body>
</html>
第六章 组件 63 组件传值-父组件向子组件传值和data与props的区别的更多相关文章
- Vue父组件向子组件传值以及data和props的区别
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/xukongjing1/article/ ...
- vue.js组件之j间的通讯一 子组件接受父祖件数据
Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...
- vue父组件异步获取动态数据传递给子组件获取不到值
原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...
- Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- vue中父级与子组件生命周期的先后顺序
1.vue的生命周期 2.views/createrCustormer.vue为父级 <template> <expressService /> </ ...
- vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...
- 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况
在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...
- artdialog4.1.7 中父页面给子页面传值
artdialog4.1.7中父页面给子页面传值时看了一些网友的解决方法: 在父页面声明全局变量 var returnValue=“ ”,子页面用art.dialog.opener.returnVal ...
- EXT--当defaultType与items的子组件默认xtype冲突时items的子组件的xtype为panel
示例图 直接看下面示例代码: /** * 获取导入表单 * @returns {Ext.FormPanel} */ function getImportForm() { return new Ext. ...
随机推荐
- 算法巩固的第一天-java冒泡排序算法
自媒体萌新一枚,不对的地方各路大神可以指点指点!个人理解: 冒泡排序算法<插入排序算法<快速排序算法 /** * 冒泡排序算法 * @author sj * */ public class ...
- 【转帖】docker-get拉取镜像
docker-get拉取镜像 题目很诱人 找时间测试一下 是否可以翻越长城下载镜像. https://www.cnblogs.com/fuyuteng/p/10904495.html docker-g ...
- sqlserver bcp命令导出数据
原文:sqlserver bcp命令导出数据 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net ...
- Linux系列（4）：入门之文件权限与目录配置
众所周知,Linux是多用户多任务的操作系统.那么如何解决自己文件不被其他用户访问呢?这就需要引入权限管理了. Linux根据文件的所属者分为3个类别:owner.group.others,且每个类别 ...
- Codeforces Round #225 (Div. 1) C. Propagating tree dfs序+ 树状数组或线段树
C. Propagating tree Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/383/p ...
- django初步了解3
目录 JsonResponse模块 form表单上传文件 FBV与CBV django settings源码分析及实际应用 模板语法 模板传值 模板过滤器 标签 if标签 for标签 with标签 自 ...
- Mysql 三大特性详解
Mysql 三大特性详解 Mysql Innodb后台线程 工作方式 首先Mysql进程模型是单进程多线程的.所以我们通过ps查找mysqld进程是只有一个. 体系架构 InnoDB存储引擎的架构如下 ...
- X86逆向15：OD脚本的编写技巧
本章节我们将学习OD脚本的使用与编写技巧,脚本有啥用呢?脚本的用处非常的大,比如我们要对按钮事件进行批量下断点,此时使用自动化脚本将大大减小我们的工作量,再比如有些比较简单的压缩壳需要脱壳,此时我们也 ...
- Django+celery+rabbitmq实现邮件发送
一.环境 1.pip包 amqp==2.4.2 anyjson==0.3.3 billiard==3.6.0.0 celery==4.3.0 Django==2.2 dnspython==1.16.0 ...
- 垃圾分类API
###自从上月开始实行垃圾分类,整个上海人都已经“疯掉”了.那么,我们应该怎么识别什么是“垃圾”呢? 这里,我提供了并整理了几个api,其中包括图像识别,垃圾分类查找,根据关键字或者图片的内容来进行查 ...