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 ...
随机推荐
- 一、美国国家经济研究局NBER教育经济研究项目工作论文合集
一.美国国家经济研究局NBER教育经济研究项目工作论文合集 (一)项目地址: American National Bureau of Economic Research - Economics of ...
- git 代理配置方式
# 设置ss git config --global http.proxy 'socks5://127.0.0.1:1080' git config --global https.proxy 'soc ...
- 吴裕雄--天生自然python学习笔记：Python3 错误和异常
语法错误 Python 的语法错误或者称之为解析错,是初学者经常碰到的,如下实例 >>>while True print('Hello world') File "< ...
- Java WebSocket实现简易聊天室
一.Socket简介 Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求.Socket的英文原义是“孔”或“插座”,作为UNI ...
- Catalan母函数法解表达式
- IIS+PHP+Mysql 返回500，服务器内部资源问题
这个错误困扰了我好久.... 尝试了好多方法都不管用,最后突然发现我的代码是: <?php $link=mysql_connect("localhost","xxx ...
- linux lsof常用方法
lsof简介 lsof(list open files)是一个列出当前系统打开文件的工具,在linux环境下,任何事物都是以文件形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.系统 ...
- 改进"尽最大努力交付"的服务
改进"尽最大努力交付"的服务 网络层的作用就是负责在不同的网段尽力转发数据包,但是负责中专数据包的路由器并不关心数据包的内容和优先顺序.而是先到达的数据包先处理,后到达的数据包排队 ...
- RTL8812AU双频无线网卡在ubuntu19和20上的驱动安装
旧爱已去 疫情在家,突然邻居敲门说,我这网上不了,帮下忙呗兄弟:兄弟都叫了,哥就冒回险,口罩扎起,一顿xxxx,原来是路由器没插到wlan口,看他拉网线可怜,就把我台式机上无线网卡送给他了,这就是又送 ...
- Ueditor富文本编辑器--上传图片自定义上传操作
最近负责将公司官网从静态网站改版成动态网站,方便公司推广营销人员修改增加文案,避免官网文案维护过于依赖技术人员.在做后台管理系统时用到了富文本编辑器Ueditor,因为公司有一个阿里云文件资源服务器, ...