<!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. Storm 第三章 Storm编程案例及Stream Grouping详解

    1 功能说明 设计一个topology,来实现对文档里面的单词出现的频率进行统计.整个topology分为三个部分: SentenceSpout:数据源,在已知的英文句子中,随机发送一条句子出去. S ...

  2. 静态成员变量和静态成员函数(static)

    数据成员可以分静态变量.非静态变量两种. 静态成员:静态类中的成员加入static修饰符,即是静态成员.可以直接使用类名+静态成员名访问此静态成员,因为静态成员存在于内存,非静态成员需要实例化才会分配 ...

  3. lastIndexOf()

    方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索.

  4. linux下的python3,virtualenv,Mysql,nginx,redis安装配置

    Mysql安装和使用:点我 Redis安装和使用:点我 centos7安装Python3以及tab补全键的使用:点我 Linux下的virtualenv:点我 nginx的安装和使用:点我

  5. TensorFlow Python3.7环境下的源码编译(三)编译

    这里要为仅支持 CPU 的 TensorFlow 构建一个 pip 软件包,需要调用以下命令: $ bazel build --cxxopt="-D_GLIBCXX_USE_CXX11_AB ...

  6. 【Coursera-ML-Notes】线性回归（上）

    什么是机器学习 关于机器学习,有以下两种不同的定义. 机器学习是研究如何使电脑具备学习能力,而不用显式编程告诉它该怎么做. the field of study that gives computer ...

  7. 跨域Ajax -- jsonp和cors

    跨域Ajax - jsonp - cors 参考博客: http://www.cnblogs.com/wupeiqi/articles/5703697.html http://www.cnblogs. ...

  8. Python函数初识二

    一.变量的作用域LEGB 1.1.变量的作用域 在Python中,程序的变量并不是在哪个位置都可以访问的,访问权限决定于这个变量是在哪里赋值的.变量的作用域决定了在哪一部分程序可以访问哪个特定的变量名 ...

  9. 浏览器差异bug汇总(js篇)

    获取滚动条高度 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; safari浏览器时间函数 ...

  10. 学霸网站-Alpha版本发布说明

    项目名称 学霸网站 项目版本 Alpha 项目团队 ourteam 发布日期 2014-11-23 一.版本的新功能 1.匿名提问 用户提问的时候可以选择匿名提问,这样在问题的详细信息不会显示提出者的 ...