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> ...
随机推荐
- 【html】标签的分类
一.标签的分类 1. 块状元素 : 独占一行, 宽高,行高,顶底部边距都可以进行设置 <div> <p> <h1-h6> <ol> <ul> ...
- Zabbix实战-简易教程--日志类
一.主动模式和被动模式介绍 要监控日志,必须使用主动模式,那么,什么是主动模式?什么是被动模式呢? 1.主动模式和被动模式 主动模式 主动模式通讯过程: ● Agent打开TCP连接(主动检测变成Ag ...
- Qt-网易云音乐界面实现-6 迷你个人中心实现
这个界面除了麻烦耗时,没有啥技术含量.暂时我也就把它称为迷你个人中心,因为后面还有一个个人中心了. 先看下完成品 左侧是我的,右侧是原生 个人感觉还可以吧,哈哈哈.给我自己奖励一个鸡腿. 看下头文件 ...
- windows系统下构建Jenkins持续集成
环境准备 windows10+tomcat+python3.x(安装方法自行百度) 安装Jenkins 从https://jenkins.io/download/ 下载war包 将war包放到tomc ...
- SecureCRT 用法总结
SecureCRT 用法总结 1.下载与破解方法: Mac:https://www.jianshu.com/p/9427f12b1fdb Window:https://drive.google.c ...
- 【Unity Shader】（十） ------ UV动画原理及简易实现
笔者使用的是 Unity 2018.2.0f2 + VS2017,建议读者使用与 Unity 2018 相近的版本,避免一些因为版本不一致而出现的问题. [Unity Shader](三) ----- ...
- 页码插入JS脚本
(function() { var obj = document.createElement("script"); obj.type = "text/javascript ...
- 最小费用最大流模板（POJ 2135-Farm Tour）
最近正好需要用到最小费用最大流,所以网上就找了这方面的代码,动手写了写,先在博客里存一下~ 代码的题目是POJ2135-Farm Tour 需要了解算法思想的,可以参考下面一篇文章,个人觉得有最大流基 ...
- Java面向对象程序设计
北京电子科技学院(BESTI) 实 ...
- 《JavaScript》字符转义
escape/unescape encodeURIComponent/decodeURIComponent encodeURI/decodeURI 转义函数会对一些 特殊字符进行转义编码 英文.数字. ...