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> 元素上创建双向数据绑定. ...
随机推荐
- 【原创】大叔案例分享（5）id打通
经常有一些需要做id打通的场景,比如用户id打通等, 问题抽象是每条数据都可以解析出一个或多个kv pair:(id_type,id),然后需要将某一个kv pair匹配的多条数据进行merge: 比 ...
- SIP笔记
消息代号: 1)1XX:临时响应,表示请求消息正在被处理. 2)2XX:成功响应,表示请求已被成功接收,完全理解并被接受. 3)3XX:重定向响应,表示需采取进一步以完成该请求. 4)4XX:客户机错 ...
- 在django中部署vue项目，不单独抽离dist文件
1,在django项目下(app所在目录),新建vue项目,使用脚手架构建vue项目,vue create (项目名) 2,构建好以后,配置django: (1),配置settings: · 修改te ...
- win10下当前目录右键添加CMD快捷方式
在某个文件夹下右键打开cmd,这样不用每次都在默认情况下切换目录.无奈win10 1703版本下shift+右键不能打开cmd,只能打开powershell. 首先,在桌面新建一个文本文档. Wind ...
- frp 路由穿透（github开源穿透软件）
server配置(windows):下载: https://github.com/fatedier/frp/releases [common] # 服务器端端口 bind_port = # 客户端连接 ...
- payload免杀之Installutil.exe&csc.exe利用
0x00 前言 C#的在Windows平台下的编译器名称是Csc.exe.Installutil.exe工具是一个命令行实用程序,允许您通过执行指定程序集中的安装程序组件来安装和卸载服务器资源,可以执 ...
- php迭代器Iterator接口
以前也看过迭代器Iterator接口,感觉不如yied好用,因此实际工作中并没有用到过. 今天看了一篇网上的博客(https://www.cnblogs.com/wwjchina/p/7723499. ...
- 数据总线&地址总线&控制总线
数据总线 (1) 是CPU与内存或其他器件之间的数据传送的通道. (2)数据总线的宽度决定了CPU和外界的数据传送速度. (3)每条传输线一次只能传输1位二进制数据.eg: 8根数据线一次可传送一个8 ...
- uCos-II移值(二)
os_cpu_c.c文件 该文件主要是根据处理器平台特点完成任务堆栈初始化函数OSTaskStkInit以及其他几个用户Hook函数的编写,其中必须要实现的函数是OSTaskStkInit(在创建任务 ...
- Tunnel Warfare HDU - 1540 （线段树处理连续区间问题）
During the War of Resistance Against Japan, tunnel warfare was carried out extensively in the vast a ...