vue 组件 模板中根数据绑定需要指明路径并通信父
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of page</title>
</head>
<body>
<div id="example">
<input v-model="parentsg">
<br>
<child v-bind:parentsg="parentsg"></child>
<!-- 直接绑定根数据text ，但是必须指明根数据的路径shou.text-->
<todo-item v-bind:text="shou.text"></todo-item>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script >
// 注册
Vue.component('child', {
props: ['parentsg'],
template: '<span>{{ parentsg}}</span>'
})
Vue.component('todo-item', {
props: ['text'],
template: '<p>{{text}}</p>'
})
// 创建根实例
new Vue({
el: '#example',
data:{
parentsg:'',
todo: {
text: 'Learn Vue',
isComplete: false
},
shou: {
text: 'shi wo ma',
isComplete: false
}
}
})
</script>
</html>
vue 组件 模板中根数据绑定需要指明路径并通信父的更多相关文章
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
- 在vue组件库中不能使用v-for
没事的,有点时候编辑器报错,但运行不一定出错, 在vue组件中注意template标签
- vue 组件 模板input双向数据数据
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>T ...
- vue组件属性中字符串如何拼接变量？
不得不说,对于水平只有jquery的vue初学者来说,vue的图片加载实现确实挺坑的,在文档中也没有看到说明.经过百度之后终于知道了什么情况. 首先: 这样是没问题的: <img src=&qu ...
- webpack+vue+.vue组件模板文件 所需要的包
{ "name": "webpack-study02", "version": "1.0.0", "de ...
- Vue组件中的问题
错误信息: 提示信息含义:组件模板中只能包含一个根元素 解决办法:在模板元素内部增加块级元素div将这些元素标签包裹起来,如图所示
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- vue组件续和前端工程化
1.3 插槽 slot template: ` <button> <slot></slot> </button> ` <my-button> ...
随机推荐
- [BZOJ3745][COCI2015]Norma[分治]
题意 题目链接 分析 考虑分治,记当前分治区间为 \(l,r\) . 枚举左端点,然后发现右端点无非三种情况: 极大极小值都在左边; 有一个在左边; 极大极小值都在右边; 考虑递推 \(l\) 的同时 ...
- Android中使用MediaCodec硬件解码,高效率得到YUV格式帧,快速保存JPEG图片(不使用OpenGL)(附Demo)
MediaCodec的使用demo: https://github.com/vecio/MediaCodecDemo https://github.com/taehwandev/MediaCodecE ...
- Jenkins + Gitlab + Ansible--playbook 代码上线流程（文末有免费视频）
jenkins 构建是支持 git 选择分支 安装 Git Parameter 插件在系统管理中的插件管理 然后点击选插件,在右上角输入 Git Parameter,找到 Git Paramete ...
- 不把DB放进容器的理由
原文地址:http://www.tuicool.com/articles/6VbqeqQ 原文为英文,以下是笔者的个人总结. 此处的DB包括但不限于Redis.ElasticSearch. 1.数据安 ...
- TortoiseGit版本库中某个文件显示问号或叹号的问题解决办法
这是一个怪问题,原因就是文件名大小写与版本库管理的大小写不一致. 解决办法: 1.先把文件夹中的物理文件名改为版本库浏览器中显示的文件名(版本库浏览器中的文件名不知道怎么改),改了以后这个文件图标就变 ...
- ubuntu18.04上的draftsight 2D的安装
1: 先安装draftsight 需要的支持库 sudo apt-get install libuuid1:i386 libice6:i386 libsm6:i386 libxt6:i386 liba ...
- windows下安装Mongodb_4.0.6最新版及常用命令
今天下载了最新版Mongodb进行安装,发现相比较于以前,方便了很多,直接下载: 一.下载地址:https://www.mongodb.com/download-center/enterprise 二 ...
- 快速稀疏角点光流框架（Fast sparse corner optical flow framework）
光流适用在连续的图像系列(视频流)中,描述本身或画面目标的运动状态:在目标跟踪.运动分析.甚至slam中都有广泛应用. opencv里就有不少光流算法,其中很经典也是当前被调用最多的的Lucas-Ka ...
- 人工智能AI芯片与Maker创意接轨（下）
继「人工智能AI芯片与Maker创意接轨」的(上)篇中,认识了人工智能.深度学习,以及深度学习技术的应用,以及(中)篇对市面上AI芯片的类型及解决方案现况做了完整剖析后,系列文到了最后一篇,将带领各位 ...
- 小冷-wireshark的标志位的值是啥
小冷系列之 wireshark的标志位的值是啥,在用wireshark抓包时,发现Flags = 0x002(SYN),很好奇0x002是什么意思. 好不好先上图: 上图是一个三次握手第一次的标志位, ...