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> ...
随机推荐
- 11.7 NOIP总复习总结
好像要1A模板题.完败 下面主要是一波SB错误总结 最小生成树(忘了sort(QwQ)) // It is made by XZZ // Fei Fan Ya Xi Lie~~~ #include&l ...
- 使用JDBC连接MySQL数据库
Java数据库连接(Java DataBase connectivity简称JDBC) 下载JDBC驱动:https://dev.mysql.com/downloads/connector/j/ Wi ...
- 网络知识 ACL NAT IPv6
第1章 ACL 访问控制列表 访问控制表(Access Control List,ACL),又称存取控制串列,是使用以访问控制矩阵为基础的访问控制方法,每一个对象对应一个串列主体. 访问控制表描述每一 ...
- DMS路由表
DMS路由表: route add -p 53.90.146.0 mask 255.255.255.0 10.77.35.249 ================================= ...
- CSS动画transform、transition和animation的区别
CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...
- 【日常训练】Hockey（CodeForces-96C）
题意与分析 对于这题题意的理解比较重要,因为这是一条傻逼题: 大小写保持不变 原串中出现的非法字符串里的每一个字符都要替换 Lucky Letter越多越好 这样一种情况下,算法其实特别简单.我傻逼在 ...
- 矩阵分解-----LDL分解
若一个矩阵A是正定的,那么该矩阵也可以唯一分解为\[{\bf{A = LD}}{{\bf{L}}^{\bf{T}}}\] 其中L是对角元素都为1的下三角矩阵,D是对角元素都为正数的对角矩阵.还是以三维 ...
- Java生成唯一ID
这里我用的是Java提供的java.util.UUID类来产生随机字串,UUID码是什么我就不再赘述,能满足我们的需求就可以. 下面是java代码: import java.util.UUID; pu ...
- DICOM 协议学习笔记之 What is DICOM
什么是DICOM? Dicom (Digital Imaging and Communications in Medicine)即医学数字成像和通信,是医学图像和相关信息的国际标准(ISO 12052 ...
- 【坚持】Selenium+Python学习记录 DAY9
2018/05/29 [来源:菜鸟教程](http://www.runoob.com/python3/python3-examples.html) 运算符重载 https://segmentfault ...