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 ...
随机推荐
- MOOC（7）- case依赖、读取json配置文件进行多个接口请求-模拟接口响应数据（18）
这里是把传入的请求数据作为响应值返回 # -*- coding: utf-8 -*- # @Time : 2020/2/15 9:47 # @File : do_mock_18.py # @Autho ...
- 吴裕雄--天生自然Android开发学习：下载安装android stuio集成开发工具
下载链接: https://developer.android.google.cn/index.html
- 转-web自动化测试，定位不到元素的原因及解决方案
1.动态id定位不到元素 分析原因:每次打开页面,ID都会变化.用ID去找元素,每次刷新页面ID都会发生变化. 解决方案:推荐使用xpath的相对路径方法或者cssSelector查找到该元素. 2. ...
- Java IO: 网络
原文链接 作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 校对:方腾飞 Java中网络的内容或多或少的超出了Java IO的范畴.关于Java网络更多 ...
- JS的时间差换算（String to 自己想要的时间格式）
JS的时间差换算(String to 标准的时间格式) 1.字符串到标准时间格式: 字符串: var time1="2018-05-11 00:00:00" var time2=& ...
- the way of hardware design study
1.器件 主要分类 1.MCU2.DSP3.FPGA4.Embedded5.System on Chip MCU MCU俗称单片机,通常无操作系统,用于简单的控制,如电梯,空调等. DSP DSP叫做 ...
- 缓存系统——redis数据库
缓存系统有:mongodb.redis(速度更快).memcache 学习memcached 参考:http://www.cnblogs.com/wupeiqi/articles/5132791.ht ...
- GPU PassThrough in KVM
实现步骤 环境 OS: # cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) # uname -a Linux hyhive 3 ...
- 高效能Windows人士的N个习惯之一：启动篇
接触电脑十多年,经历了各种折腾阶段,这几年开始沉静下来,不再追求花哨的界面与应用,只注重工作的效率,逐渐养成了一套自己的操作习惯,感觉不错,特撰文分享.标题借用了一下<高效能人士的七个习惯> ...
- 如何在实际项目中使用PageHelper分页插件
PageHelper是一个分页插件,能够简单快速的帮助开发人员完成常见的分页功能,你只需要简单的使用两行代码就可以完成一个分页效果- 最近做一个科创项目,使用Maven+SSM的环境,有分页的功能,于 ...