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 ...
随机推荐
- ./config\make\make install命令详解
这些都是典型的使用GNU的AUTOCONF和AUTOMAKE产生的程序的安装步骤 一.基本信息 1../configure 是用来检测你的安装平台的目标特征的.比如它会检测你是不是有CC或GCC,并不 ...
- 吴裕雄--天生自然KITTEN编程：切换角色
- js中判断为false的情况
document.write((new Boolean())+"<br />"); document.write((new Boolean(" ...
- python 使用 UTF-8 编码
题记 一般我喜欢用 utf-8 编码,在 python 怎么使用呢? 使用utf-8 文字 在 python 源码文件中用 utf-8 文字.一般会报错,如下: File "F:\works ...
- loadrunner通过odbc测mysql数据库语句
#include "lrd.h" Action() { double trans_time; //定义一个double型变量用来保存事务执行时间 static LRD_INIT_ ...
- Promethues配置
# my global config global: scrape_interval: 10s # Set the scrape interval to every 15 seconds. Defau ...
- Dangerous query method called with non-attribute argument(s)
踩坑 query method. 问题描述 现有model issue,需要对issues进行排序,根据指定的ID集合来决定记录的位置,比如id包含在(4, 6, 9)中的纪录就排在前面,剩下的排在后 ...
- yii批量数据插入
yii框架批量插入数据有两种方法,第一种是循环多次插入和一次批量插入,第一种方法要注意插入数据中间有一次数据插入失败要注意回滚事务 循环插入数据 第一种方法 $model = new User(); ...
- 浅谈了解JDBC
目录 前言 作用 JDBC的架构 步骤 JDBC常见的关键字解释 前言 Java数据库连接,是Java语言中用来规范客户端程序如何来访问数据库的应用程序接口,提供了诸如查询和更新数据库中数据的方法.J ...
- SVN版本控制说明与相关指令
SVN版本控制说明 目的 多个版本中并行开发,提高开发效率: 保证各个版本和各个环境(开发.测试.主干)的独立,避免相互影响: 通过分支与主干的合并,这样主干永远是最新.最高版本,并且都在后面的测试中 ...