vue基础----组件通信（$parent,$children）
1.按照dom的父子级关系，在子组件中可以通过$parent 直接调用父组件的方法，也可得到父组件的属性。
2.在父组件中通过$childrens可以得到一个子组件数组,能够在父组件中调用子组件的方法和得到属性。
3.特别注意一下_uid标识每一个组件。
下面是一个下拉菜单举例
<body>
<div id="app">
<collapse>
<collapse-item title="大学同学">大学同学A</collapse-item>
<collapse-item title="高中同学">高中同学A</collapse-item>
<collapse-item title="初中同学">初中同学A</collapse-item>
</collapse>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
/* 组件通信 $parent 和$children的用法 _uid的用法*/
Vue.component("collapse",{
template:`
<div class="box">
<slot></slot>
</div>
`,
data(){
return {
"yilia":1244
}
},
methods:{
changeCusionState(childId){
/*element 是子组件可以直接调用 子组件的方法和属性*/
this.$children.forEach(element => {
if(element._uid !== childId){
element.show = false;
}
});
}
}
}); Vue.component("collapse-item",{
props:['title'],
template:`
<div>
<div class="title" @click="handleClick">{{title}}</div>
<div v-show="show">
<slot></slot>
</div> </div>
`,
data(){
return {
show:false
}
},
methods:{
handleClick(){
this.show = !this.show;
/*用 $parent直接调用父组件的方法*/
console.log(this.$parent.yilia);
this.$parent.changeCusionState(this._uid);
},
vueTest(){
console.log("I am called!");
}
}
}); let vm = new Vue({
el:"#app",
data:{
msg:"hello vue"
}
});
</script>
</body>
.title {
width:120px;
height:30px;
text-align: center;
border:1px solid red;
margin-top:4px;
}
vue基础----组件通信（$parent,$children）的更多相关文章
- VUE简单组件通信
[x] 1.prop组件通信 1.简单理解 2.多层嵌套 [x] 2.使用ref进行组件通信 [x] 3.$emit组件通信 1.prop组件通信 1.简单理解 有点类似于应式的感觉,我不管你要不要只 ...
- Vue兄弟组件通信
Vue兄弟组件通信之借助中央事件总线 下载链接:https://www.yinxiangit.com 其实要实现兄弟组件通信,就算是通过父子组件通信的方式也是可以达到的,如 子 ——>父——&g ...
- vue学习指南：第七篇(详细) - Vue的 组件通信
Vue 的 父传子 子传父 一.父组件向子组件传值: 父传子 把需要的数据 传递给 子组件,以数据绑定(v-bind)的形式,传递到子组件内部,供子组件使用 缩写是(:) 1.创建子组件,在src/ ...
- vue基础-组件&插槽
组件 组件化的意义:封装(复用,把逻辑隐藏起来,提高可维护性),快速开发(搭积木) 约定:我们通常把那些除了HTML标签以外的自定义组件,才称为'组件',结论是,我们说"父组件"& ...
- vue父子组件通信
一.父子组件间通信 vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 父组件: <template> <div id='user-login'> & ...
- vue 父子组件通信
算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...
- vue基础——组件基础
一.基本示例 这里有一个Vue组件的示例: // 定义一个名为 button-counter 的新组件 main.js Vue.component('button-counter', { data: ...
- vue基础——组件(组件嵌套)
介绍 vue中页面是由组件组成的,即以.vue结尾的文件. .vue文件由三部分组成,分别是template.script.style. 分别写html.js.css代码. 组件之间可以互相嵌套.所以 ...
- vue中组件通信
组件的通信 1. 父子组件通信 案例: //父子组件通信思路 // 1 将父组件的数据传给子组件 在子组件上自定义单项数据绑定 // 2 子组件用props 接受自定义的那个:号属性 Vue.co ...
随机推荐
- 【Linux_Shell 脚本编程学习笔记六、shell的数值运算】
1.bc 命令的用法(可以整数也可以小数): bc是 UNIX下的计算器,它也可以用在命令行下面: 例: 给自变量 i 加 1 [root@docker Demo_test]# i= [root@do ...
- cxf整合spring代码
导入jar包cxf的jar包 创建实体类 package com.yhd.webservice.cxf.server.poto; public class Person { private Strin ...
- dotfuscator安装
1.vs 2017 安装 dotfuscator 组件 打开vs 2017 按 ctrl + Q在输入框中输入“dotfuscator” ,选中第一个. 2.安装完成后即可在vs的工具中看到该组件 3 ...
- Linux下MongoDB的部署
一.MongoDB的下载解压 MongoDB在linux是免编译安装的,直接解压就可以用. # 解压 tar -zxvf mongodb-linux-x86_64-3.0.6.tgz # 将解压包拷贝 ...
- 读书笔记之 数字图像处理的MATLAB实现（第2版）
- Linux IO多路复用
监听文件描述符的状态来进行相应的读写操作,3个函数: 123 selectpollepoll 123456789 int (int nfds, fd_set *readfds, fd_set *wri ...
- WiFi曝出安全漏洞几近“裸奔”：运营商能借机收割一波红利吗？
作为大众生活中不可或缺的基础架构,也是智能生活普及的推动性力量,运营商的重要性毋庸置疑.但无奈的是,一直以来运营商都似乎是站在了大众的"对立面".看似光鲜亮丽,但在壮观的 ...
- 关于线上bug
之所以想写下线上bug,因为发觉有些公司对线上bug的处理是比较严格甚至是很苛刻,涉及到的相关人可能会因此而背黑锅. 之所以会存在这样情况,因为公司各部门都有关联,特别是用户.老板的投诉,也给公司会造 ...
- CoreGraphic
public func UIGraphicsBeginImageContextWithOptions( size: CGSize, opaque: Bool, _ scale: CGFloat) si ...
- 【Android TimeCat】 解决cannot resolve symbol R
莫名其妙出现了,鬼知道怎么来的. 解决方法总结 1. 推荐 解决90%的情况: Build->Clean ProjectBuild->Rebuild Project 2. 不常见 Andr ...