Vue_(组件通讯)父子组件简单关系
Vue组件 传送门
在Vue的组件内也可以定义组件，这种关系成为父子组件的关系
如果在一个Vue实例中定义了component-a，然后在component-a中定义了component-b，那他们的关系就是
Vue实例 -- 根组件 root
component-a – 相对于root 这是子组件，相对于component-b这是 父组件
component-b -- 子组件
目录结构
简单的通过在父组件调用子组件，但父组件的值是无法直接传递给子组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<father-component></father-component> </div>
</body> <template id="father-template">
<div>
<h1>father component</h1>
myData : <span>{{name}}</span> <hr /> <child-component></child-component>
</div>
</template> <template id="child-template">
<div>
<h2>child component</h2>
fatherData : <span>{{name}}</span>
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data : { },
components : {
"father-component" : {
data(){
return {
name : 'Gary'
}
},
template : "#father-template",
components : {
"child-component" : {
template : "#child-template"
}
}
}
}
}).$mount("#GaryId"); </script>
</html>
Gary_fatherAndChild.html
实现过程
在<body>中通过<div>调用父组件<father-component>去调用子组件<child-component>
<body>
<div id="GaryId">
<father-component></father-component>
</div>
</body>
父子组建，在父组件与子组件中分别调用父组件data()域中的值
<template id="father-template">
<div>
<h1>father component</h1>
myData : <span>{{name}}</span> <hr /> <child-component></child-component>
</div>
</template> <template id="child-template">
<div>
<h2>child component</h2>
fatherData : <span>{{name}}</span>
</div>
</template>
在Vue中子组件嵌套在父组件当中，其中给父组件name属性赋值"Gary"
components : {
"father-component" : {
data(){
return {
name : 'Gary'
}
},
template : "#father-template",
components : {
"child-component" : {
template : "#child-template"
}
}
}
}
Vue_(组件通讯)父子组件简单关系的更多相关文章
- 简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
- 总结Vue第二天：自定义子组件、父子组件通信、插槽
总结Vue第二天:自定义子组件.父子组件通信.插槽 一.组件: 组件目录 1.注册组件(全局组件.局部组件和小demo) 2.组件数据存放 3.父子组件通信(父级向子级传递数据.子级向父级传递数据) ...
- Vue_(组件通讯)子组件向父组件传值
Vue组件 传送门 子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: ...
- Vue_(组件通讯)父组件向子组件传值
Vue组件 传送门 父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件 2.准备获取数据:c ...
- Vue_(组件通讯)动态组件结合keep-alive
keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...
- vue.js单文件组件中非父子组件的传值
最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...
- Vue（2）- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
随机推荐
- 快速上手小程序的mpvue框架
一.什么是mpvue框架? mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心(所以建议熟练掌握vue再使用mpvue框架,否则还是建议去使用原生框架去写小程序) ...
- Winform 5种皮肤小结（内含丰富的下载实例）
软件界面就是指软件中面向操作者而专门设计的用于操作使用及反馈信息的指令部分. 优秀的软件界面有简便易用,突出重点,容错高等特点. 1.东日IrisSkin 使用IrisSkin只能是对单一的控件重绘 ...
- [转载]java的传值和传引用
本文转载自:https://blog.csdn.net/weixin_36759405/article/details/82764339 基本类型(byte,short,int,long,double ...
- 02-【servlet】
1.什么是Servlet Servlet是JavaWeb的三大组件之一[Servlet,Filter,Listener],它属于动态资源.Servlet的作用是处理请求,服务器会把接收到的请求交给Se ...
- nacos 1.1.x 集群部署笔记
Nacos 是什么? https://nacos.io/zh-cn/docs/what-is-nacos.html 服务(Service)是 Nacos 世界的一等公民.Nacos 支持几乎所有主流类 ...
- 修改虚拟机CentOS系统ip地址和主机名
按照教程安装了虚拟机但是未配置静态IP,所以导致IP地址经常变化,CRT,mysql等连接时经常出现问题. 所以修改虚拟机内CentOS系统的IP为静态IP. 一.查看当前网关 虚拟机-->[编 ...
- mysql-mmm实现高可用和部署时须要考虑的问题
mysql-mmm简介 Multi-Master Replication Manager for MySQL,简称mmm,官方的介绍可以参考mmm官网.好处自然不用说,读写分离,官方称读能做到负载均衡 ...
- dedecms织梦系统后台验证码图片不显示的解决方法
网站迁移后,dedecms织梦系统后台验证码图片不显示的解决方法通用解决方案-取消后台验证码功能因为没有验证码,不能进后台,所以修改php文件源代码:方法一:打开dede/login.php 找到如下 ...
- 开源框架相关面试问题-retrofit网络框架面试问题讲解
retrofit使用简介: 在retrofit中通过一个接口作为Http请求的api接口.注意:@GET("url")中的url只是一个路径,不包含主机号的. 创建一个retrof ...
- linux 命令格式和帮助
命令的格式: command [options] [arguments] command:命令 options: --单词全称 或 -单字简称 如: ls --all 等于 ls - ...