vue.js父子组件通信动态绑定
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id='app'>
<!--这里的作用是将父组件渲染到页面上-->
<father></father>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script type="text/x-template" id="father">
<div>
<!--这里实现一个双向绑定-->
<!--parentMsg变量必须在data中声明，不然会报错，我就错在这个坑-->
<input v-model="parentMsg">
<br>
<child :my-message="parentMsg"></child>
</div>
</script>
<script type="text/x-template" id="child">
<div> {{'父组件传递的数据为：'+ myMessage }} </div>
</script>
<script>
Vue.component('father',{
// 这里我直接把template写到前面script标签中了，写在这里一大坨，难看
template:'#father',
data:function(){
return {
parentMsg:''
}
}
});
//在 Vue 中，父子组件的关系可以总结为 props down, events up。
// 父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息
Vue.component('child', {
props: ['myMessage'],//这里的props选项是用来实现父子组件的通信的，传递下来的消息字组件用花括号接住
template: '#child'
});
new Vue({
el:'#app'
})
</script>
</html>vue.js父子组件通信动态绑定的更多相关文章
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- Vue的父子组件通信（转载）
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
- 关于vue.js父子组件数据传递
vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...
- Vue.js父子组件如何传值 通俗易懂
父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建pr ...
- vue(三)-父子组件通信
原因 : Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. props 父组件给子组件传递数据 props:作用是父组件给 ...
- Vue.js 父子组件相互传递数据
父传子 : 子组件接收变量名=父组件传递的数据 如::f-cmsg="fmsg" 注意驼峰问题 子传父:@子组件关联的方法名 = 父组件接受的方法名 如:@func=" ...
随机推荐
- Antdesign Form 实现页面控件的赋值加载
使用Antdesign Form时,当页面加载时,需要从后台获取数据,对Form中控件的默认赋值.看似比较简单的需求,而且Antdesign 官方文档中也有相应介绍,然后对于Form 的CheckBo ...
- EJS学习（四）之语法规则下
模版函数 在 EJS 之外,提供了一些额外的模版函数来简化我们的一些工作 GIT:https://github.com/willerce/tmt-ejs-helper css()方法 快速的引用 CS ...
- MySQL 主从同步架构中你不知道的“坑”（2）
指定同步库情况 1.binlog_format= ROW模式 mysql> use testdb; Database changed mysql> show tables; +----- ...
- springboot(二十)-配置文件 bootstrap和application区别
用过 Spring Boot 的都知道在 Spring Boot 中有以下两种配置文件 bootstrap (.yml 或者 .properties) application (.yml 或者 .pr ...
- Python标准库、第三方库和外部工具汇总
导读:Python数据工具箱涵盖从数据源到数据可视化的完整流程中涉及到的常用库.函数和外部工具.其中既有Python内置函数和标准库,又有第三方库和工具. 这些库可用于文件读写.网络抓取和解析.数据连 ...
- 借用jquery实现：使浏览器的“前进”按钮功能失效
我借用jquery实现了这种效果,但并没有禁用掉浏览器本身的“前进”按钮,以下是代码,希望有用的朋友借鉴以下: $(function () { jQuery(window).bind("un ...
- 多线程编程-- part 6 共享锁和ReentrantReadWriteLock
介绍: ReadWriteLock,顾名思义,是读写锁.它维护了一对相关的锁 — — “读取锁”和“写入锁”,一个用于读取操作,另一个用于写入操作.(1)“读取锁”用于只读操作,它是“共享锁”,能同时 ...
- php函数之strtr和str_replace的区别
php字符串替换函数 strtr()有两种用法: strtr(string,from,to) 或者strtr(string,array) 首先针对strtr函数第一种方式: 我们看看下面的举例: &l ...
- （转）Java并发编程：核心理论
原文链接:https://www.cnblogs.com/paddix/p/5374810.html Java并发编程系列: Java 并发编程:核心理论 Java并发编程:Synchronized及 ...
- xml_SAX解析
(一)SAX解析 1.1 SAX解析 SAX:基于事件处理的机制 sax解析xml文件时,遇到根开始标签,根结束标签,开始解析文件,文件解析结束,字符内容,空白字符等都会触发各自的方法. 优点: 适合 ...