<!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 组件 模板中根数据绑定需要指明路径并通信父的更多相关文章

  1. Vue基础系列（三）——Vue模板中的数据绑定语法

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  2. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

  3. 在vue组件库中不能使用v-for

    没事的,有点时候编辑器报错,但运行不一定出错, 在vue组件中注意template标签

  4. vue 组件 模板input双向数据数据

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>T ...

  5. vue组件属性中字符串如何拼接变量？

    不得不说,对于水平只有jquery的vue初学者来说,vue的图片加载实现确实挺坑的,在文档中也没有看到说明.经过百度之后终于知道了什么情况. 首先: 这样是没问题的: <img src=&qu ...

  6. webpack+vue+.vue组件模板文件 所需要的包

    {  "name": "webpack-study02",  "version": "1.0.0",  "de ...

  7. Vue组件中的问题

    错误信息: 提示信息含义:组件模板中只能包含一个根元素 解决办法:在模板元素内部增加块级元素div将这些元素标签包裹起来,如图所示

  8. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  9. vue组件续和前端工程化

    1.3 插槽 slot template: ` <button> <slot></slot> </button> ` <my-button> ...

随机推荐

  1. P5231 [JSOI2012]玄武密码

    P5231 [JSOI2012]玄武密码 链接 分析: 首先对所有询问串建立AC自动机,然后扫描一遍母串,在AC自动机上走,没走到一个点,标记这个点走过了,并且它的fail树上的祖先节点也可以访问到( ...

  2. Python 学习 第二篇：数据类型（字符串）

    字符串是一个字符的.有序的.不可变的序列,用于存储基于文本的信息.字符串所包含的字符存在从左至右的位置顺序,不可以在原处(in-place)修改.Python没有C语言的字符和字符串之分,只有字符串. ...

  3. PLSQL_数据泵Datapump导入导出数据IMPDP / EXPDP（概念）（Oracle数据导入导出工具）（转）

    一.摘要 在平常备库和数据库迁移的时候,当遇到大的数据库的时候在用exp的时候往往是需要好几个小时,耗费大量时间.oracle10g以后可以用expdp来导出数据库花费的时间要远小于exp花费的时间, ...

  4. Fiddler 抓包https配置 提示:creation of the root certificate was not successful 证书安装不成功

    window7 提示:creation of the root certificate was not successful 证书安装不成功 1.cmd 命令行   找到fiddler的安装目录  如 ...

  5. 在初学Flask中遇到的小问题。

    今天初步认识到了Flask这个轻量级web开发框架.对于初步认识框架的我,暂时的有了一个小小的认识, 因为初学.也没有什么代码可供参开.一下的就是一个小小的例子. # 导包from flask imp ...

  6. C#单例模式初识

    设计模式之单例模式 定义: 确保一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 要素: 私有的构造函数(防止外部实例化) 指向自己实例的私有静态引用 以自己实例为返回值的静态公有方法或者 ...

  7. MySQL基础架构之查询语句执行流程

    这篇笔记主要记录mysql的基础架构,一条查询语句是如何执行的. 比如,在我们从student表中查询一个id=2的信息 select * from student where id=2; 在解释这条 ...

  8. java高并发之锁的使用以及原理浅析

    锁像synchronized同步块一样,是一种线程同步机制.让自Java 5开始,java.util.concurrent.locks包提供了另一种方式实现线程同步机制——Lock.那么问题来了既然都 ...

  9. opengl矩阵向量

    如何创建一个物体.着色.加入纹理,给它们一些细节的表现,但因为它们都还是静态的物体,仍是不够有趣.我们可以尝试着在每一帧改变物体的顶点并且重配置缓冲区从而使它们移动,但这太繁琐了,而且会消耗很多的处理 ...

  10. 一句话打印'*'图案(列表推导式, 人生苦短, 我用Python)

    ```python # coding=utf-8 print ('\n'.join(['*'*6 for i in range(4)])) # ****** # ****** # ****** # * ...