<!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. 【BZOJ1045】[HAOI2008]糖果传递

    [BZOJ1045][HAOI2008]糖果传递 题面 bzoj 洛谷 题解 根据题意,我们可以很容易地知道最后每个人的糖果数\(ave\) 设第\(i\)个人给第\(i-1\)个人\(X_i\)个糖 ...

  2. iOS开发-通过正则表达式判断字符串是否为纯阿拉伯数字

    iOS开发-通过正则表达式判断字符串是否为纯阿拉伯数字 简述:NSString * regex_0 = @"\\d{1,}";   /*允许首位为0*/ NSString * re ...

  3. underscore.js 分析6 map函数

    作用:通过转换函数(iteratee迭代器)映射列表中的每个值产生价值的新数组.iteratee传递三个参数:value,然后是迭代 index. _.map([1, 2, 3], function( ...

  4. Codeforces 909 C. Python Indentation (DP+树状数组优化)

    题目链接:Python Indentation 题意: Python是没有大括号来标明语句块的,而是用严格的缩进来体现.现在有一种简化版的Python,只有两种语句: (1)'s'语句:Simple ...

  5. SQL Server 的通用分页显示存储过程（转载）

    http://database.51cto.com/art/200512/12923.htm 建立一个 Web 应用,分页浏览功能必不可少.这个问题是数据库处理中十分常见的问题.经典的数据分页方法是: ...

  6. lua编程之协程介绍

    一,lua协程简介 协程(coroutine),意思就是协作的例程,最早由Melvin Conway在1963年提出并实现.跟主流程序语言中的线程不一样,线程属于侵入式组件,线程实现的系统称之为抢占式 ...

  7. halcon二 图像校正

    1.get_image_size(Image : : : Width, Height) 返回图像的尺寸. 2.parameters_image_to_world_plane_centered (Cam ...

  8. 小强版之无码理解C语言指针

     1. 先从普通变量开始   2. 撸完变量撸指针   3. 故事情节进一步发展,此处少儿不宜   4. 奶茶妹妹捉奸,小强死定了   5. 源码欣赏  #include <stdio.h> ...

  9. Git----01介绍&下载&安装&创建本地仓库

    一.Git介绍 1.0.Git是分布式版本控制工具 1.1.历史 Linux 内核开源项目有着为数众广的参与者.绝大多数的 Linux 内核维护工作都花在了提交补丁和保存归档的繁琐事务上(1991-2 ...

  10. 为什么HashMap桶(链表)的长度超过8会转换成红黑树？

    百度了一下,感觉能说清楚的并不多,所以在此记录一下. 首先说一说转换为红黑树的必要性: 红黑树的插入.删除和遍历的最坏时间复杂度都是log(n), 因此,意外的情况或者恶意使用下导致hashCode( ...