vue中用ref实现父子组件、孙组件、兄弟组件、非亲子孙组件互相调用的方法
无论是什么层级的组件之间互相调用，掌握好ref后都是万变不离其宗。来练练手吧
1.父子传：
父组件:
<template><div><Button @click="handleClick">点击调用子组件方法</Button><Child ref="child"/></div>
</template> <script>
import Child from './child';export default {methods: {handleClick() {this.$refs.child.childFun();},},
}
</script>
子组件：
<template><div>我是子组件</div>
</template>
<script>
export default {methods: {childFun() {console.log('我是子组件的方法');},},
};
</script>
2.父孙传：
父组件：
<template><div><Button @click="handleClick">点击调用孙组件方法</Button><Child ref="child"/></div>
</template> <script>
import Child from './child';export default {components: {Child },methods: {handleClick() {this.$refs.child.$refs.grandson.test() },},
}
</script>
子组件：
<template><div>我是子组件</div><grandson ref='grandson'></grandson>
</template>
<script>
import grandson from './grandson';
export default {name: "child",components: {grandson },methods: {childFun() {console.log('我是子组件的方法');},},
};
</script>
孙组件：
<template><div></div>
</template><script>
export default {name: "grandson",methods:{test(){console.log('我是孙组件的方法')}}}
</script>
3.父孙传2(复用性更高)：
父组件：
<template><div><Button @click="handleClick">点击调用子组件方法</Button><Child ref="child"/></div>
</template> <script>
import Child from './child';export default {components: {Child },methods: {handleClick() {this.$refs.child.test();},},
}
</script>
子组件：
<template><div>我是子组件</div><grandson ref='grandson'></grandson>
</template>
<script>
import grandson from './grandson';
export default {name: "child",components: {grandson },methods: {childFun() {console.log('我是子组件的方法');},test() {this.$refs.grandson.test(); // 一层层调用到孙组件方法},},
};
</script>
孙组件：
<template><div>我是孙组件</div>
</template><script>
export default {name: "grandson",methods:{test(){console.log('我是孙组件的方法')}}}
</script>
4.兄弟传：
父组件：
<template><child1 ref="child1Container"></child1><child2 @order="order"></child2>
</template><script>import child1 from './components/child1';import child2 from './components/child2';export default {name: 'father',components: {child1,child2},methods: {order(){this.$refs.child1Container.say();}}}</script>
子兄弟组件1：
<template><div>我是子组件11111</div><div @click="say"></div>
</template><script>export default {name: 'child1',methods: {say(){console.log('我是子组件1里面的方法");}}}</script>
子兄弟组件2：
<template><div>我是子组件22222</div><div @click="orderBro">点击调用兄弟1组件方法</div>
</template><script>export default {name: 'child2',methods: {orderBro(){this.$emit('order');}}}</script>
5.非亲子孙传：
父组件：
<template><child1 ref="child1Container"></child1><child2 @order="order"></child2>
</template><script>import child1 from './components/child1';import child2 from './components/child2';export default {name: 'father',components: {child1,child2},methods: {order(){this.$refs.child1Container.say();}}}</script>
子兄弟组件1：
<template><div>我是子组件11111</div><grandson ref='grandson'></grandson>
</template><script>export default {name: 'child1',methods: {say(){this.$refs.grandson.say();}}}</script>
子兄弟组件2：
<template><div>我是子组件22222</div><div @click="orderBroGrandson">点击调用兄弟1组件的孙组件方法</div>
</template><script>export default {name: 'child2',methods: {orderBroGrandson(){this.$emit('order');}}}</script>
子兄弟组件1的子组件（孙组件）：
<template><div>我是子兄弟1组件的子组件（孙组件）</div>
</template><script>
export default {name: "grandson",methods:{say(){console.log('调用子兄弟组件1的子组件（孙组件）的方法')}}}
</script>
完
ref真滴牛弊
THX~
vue中用ref实现父子组件、孙组件、兄弟组件、非亲子孙组件互相调用的方法相关推荐
- vue教程2 【Vue组件化编程】 组件的创建和使用 非单文件组件和单文件组件的区别
组件 实现局部功能的代码和资源的集合 非单文件组件 1.定义组件(创建组件) 2.注册组件 3.使用组件(写组件标签) 定义 使用Vue.extend(options)创建,其中options和new ...
- vue的父子孙之间组件通信和兄弟之间的组件通信
父子孙组件之间的组件通信 面试题:vue组件之间有哪些通信方式呢? 第一种:props+this.$emit: props: 父组件A通过v-bind绑定数据,传递数据给子组件,子组件用props接收 ...
- Vue（一）父子组件通信
Vue 父子组件通信的三种方案 解决方法 使用props进行通信 使用事件分发机制(EventBus) $parent 属性 vuex方式 (后续补充) 结构图 一. props p r o p s ...
- vue父子组件通信，兄弟组件通信
目录 一.父子组件通信 1.子组件通过 props 获取父组件变量和父组件调用子组件中的方法(这两个都是父传子的思想) a:子组件通过 props 获取父组件变量 b:父组件调用子组件中的方法 2.父 ...
- 【前端面试题之Vue篇】(1)父子组件通信方式Props/$emit
文章目录 前言 一.父组件向子组件传值 1.Props定义 2. Props 用法 (1)路由里注册父子组件 (2)父组件里引入子组件,并且注册子组件 (3)子组件利用props接受父组件传过来的值 ...
- vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例 子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...
- vue入门学习篇——父子组件通信
Vue父子组件之间通信的原理 父组件:props down -- 父组件通过props向下传递数据给子组件 子组件:events up -- 子组件通过事件events向上传递数据给父组件 下面我们来 ...
- Vue项目中实现父子组件之间传值
1.路由配置:使用children属性实现路由嵌套,嵌套的组件关系就是父子组件关系 {path: '/father',name: 'father',component: father,children ...
- vue中用table_Ant-Design-Vue中关于Table组件的使用
1. 如何自定义表格列头: Name const columns =[ { dataIndex:'name', // 自定义列表头,则不能设置title属性align:'left', slots: { ...
最新文章
- Linux中的动态库和静态库(.a/.la/.so/.o)
- 虚拟摄像头 安卓版_林俊杰 ft. M.E.，联同视效大厂数字王国加码虚拟偶像
- uwsgi 参数解释
- 【Android FFMPEG 开发】Android Studio 中 配置 FFMPEG 库最小兼容版本 ( undefined reference to 'atof' )
- fanuc roboguide_ROBOGUIDE码垛简单工作站的创建
- 学点 C 语言(9): if 语句
- Python--DBUtil
- 分布式数据库相关概念介绍
- 杂记-字符串的字节长度
- CDH 6 安装 Hbase 二级索引 Solr + Key-Value Store Indexer
- Quartz.NET快速入门指南
- Java中Double保留后小数位的几种方法
- MYSQL中5.7.10ROOT密码及创建用户
- oracle和sqlserver数据库直接生成xml
- 深交所再推跨市场ETF交易模式创新，助力ETF发展
- Raki的读paper小记：Dark Experience for General Continual Learning: a Strong, Simple Baseline
- Linux CentOS 7 Apache Tomcat 7 安装与配置
- JS layer时间组件laydate的回调中重置清除选择无效的问题
- vue上传、修改头像
- Coinbase 研究：Web3 开发者堆栈指南