<!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. 面试题-python基础

    一.Python基础 1.什么是python?使用python有什么好处? python是一种编程语言,它有对象.模块.线程.异常处理和自动内存管理.它简洁,简单.方便.容易扩展.有许多自带的数据结果 ...

  2. ubuntu下su: Authentication failure的解决办法（su和su - root的区别）

    参考:ubuntu下su: Authentication failure的解决办法(su和su - root的区别)

  3. angularjs 常用方法

    一 angular的copy和extend 1.angular.extend() angular.extend():依次将第二个参数及后续的参数的第一层属性(不管是简单的属性还是对象)拷贝,赋给第一个 ...

  4. jmeter测试java代码

    有时候总是要写代码的,不得不说你也得会,这不往下看 java请求了,就的写代码,那么先来实现一个类, package com.company.jemeters; public class Hello ...

  5. Html.RenderPartial与Html.RenderAction的区别

    Html.RenderPartial与Html.RenderAction这两个方法都是用来在界面上嵌入用户控件的. Html.RenderPartial是直接将用户控件嵌入到界面上: <%Htm ...

  6. trampoline蹦床函数解决递归调用栈问题

    递归函数的调用栈太多,造成溢出,那么只要减少调用栈,就不会溢出.怎么做可以减少调用栈呢?就是采用"循环"换掉"递归". 下面是一个正常的递归函数. functi ...

  7. 使用过滤器解决JSP页面的乱码问题

    乱码详情  总结:讨论了使用GET和POST方法,控制台和JSP页面显示的问题. 最终发现:在servlet或者过滤器中添加:request.setCharacterEncoding("ut ...

  8. Python20-Day04

    ##########迭代器.生成器和面向过程编程########## 一.迭代器 迭代器是一个重复的过程,每次重复即一次迭代,并且每次迭代的结果都是下一次迭代的初始值: l = [1,2,3] cou ...

  9. 团队C++作业1

    我的分工 在本次作业中,我负责的是建筑类的完成还有调试运行. 建筑类的完成: 首先我认为建筑类的完成中,建筑类中应该有三个成员,水晶,防御塔,泉水. 水晶在这个里头是要被保护的对象,它的功能有回血还有 ...

  10. Cosplay之孩子的妈咪

    很荣幸的担任“孩子妈妈”的角色,站在父母的角度去思考怎样的一个四则运算的APP才算是符合要求,可以受到广大家长的喜爱.不外乎有这样一些功能:1.可以随时的给孩子出题目,而且可以很快的得出正确答案.分析 ...