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 ...
随机推荐
- CF-551：部分题目总结
题目链接:http://codeforces.com/contest/1153 A .Serval and Bus pro:给出n种公交车的首班车时间和两班车之间的时间间隔,找t时间以后的第一辆车是第 ...
- [LC] 24. Swap Nodes in Pairs
Given a linked list, swap every two adjacent nodes and return its head. You may not modify the value ...
- java 字符串转日期格式
/** * 字符串转日期格式 * */ public static Date date(String date_str) { try { Calendar zcal = Calendar.getIns ...
- 云服务器之——Linux下配置JDK环境
在Linux下jdk的安装已经操作了很多次,每次发现自己还是会忘记之前的操作,所以今天就简单的来做个记录. 第一步:下载jdk安装包 登录oracle官网:https://www.oracle.com ...
- staruml百度网盘下载
分享staruml官方百度网盘下载 下载时间:2019年9月4日 21:27:37 StarUML(简称SU),是一种创建UML类图,生成类图和其他类型的统一建模语言(UML)图表的工具.StarU ...
- MatterTrack Route Of Network Traffic :: Matter
Python 1.1 基础 while语句 字符串边缘填充 列出文件夹中的指定文件类型 All Combinations For A List Of Objects Apply Operations ...
- 基于seo的话 一个页面里的h1标签应该控制在多少个
不能出现多个,一个页面只能出现一次,次数多了就会造成权重分散
- 【转载】ArcGIS中的WKID
原出处:http://www.cnblogs.com/liweis/p/5951032.html 提到坐标系统,大家多少能明白一些,但在运用时,有些朋友搞得不是非常清楚,以后专门来总结.在实地生产项目 ...
- Python——5函数
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- C++走向远洋——31（六周，项目一，1.1）
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:fenshu.cpp * 作者:常轩 * 微信公众号:World ...