-
Vue子组件向父组件通信与父组件调用子组件中的方法
2020-08-27 07:57:41主要介绍了Vue子组件向父组件通信与父组件调用子组件中的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 -
vue中子组件和子组件之间怎么通信_关于Vue子组件向父组件通信与父组件调用子组件中的方法步骤...
2020-12-31 07:27:57Vue子组件向父组件通信与父组件调用子组件中的方法子组件向父组件通信子组件的button按钮绑定点击事件,事件方法名为sendToParent(),该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);...Vue子组件向父组件通信与父组件调用子组件中的方法
子组件向父组件通信
子组件的button按钮绑定点击事件,事件方法名为sendToParent(),
该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);
在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e),
而msg已经在data中声明,其值为”子级消息”,故最终的输出结果为: 展示父级接收到的消息:子级消息
父组件调用子组件中的方法
点击父组件的button按钮,触发了click事件指向的useChild方法[该方法的行为是输出”父级消息”],
useChild方法在父组件的中的methods中声明,调用子组件中的方法,并传入参数str,即this.$refs.child1.getMsg(str);
而getMsg方法已经在子组件的methods中声明,其行为是console.log('子级组件收到父级的内容',str);,
所以,最终的输出结果为: 子级组件收到父级的内容 父级消息
代码示例(结合上面的分析理解代码)
子向父通信#app {
border: 1px solid blue;
width: 500px;
padding: 20px;
margin: auto;
border-radius: 8px;
background: fuchsia;
}
#wrapper {
border: 1px solid red;
width: 400px;
padding: 20px;
border-radius: 8px;
background: yellowgreen;
margin-top: 20px;
}
这是父组件
展示父级接收到的消息:{{msg}}
调用子组件的方法
这是子组件
向父组件发消息
let child = {
template: '#child',
data() {
return {
msg: '子级消息'
};
},
methods: {
sendToParent() {
// 子组件只管发送消息,其中cus-event为自定义事件名(事件名不能写成驼峰法,多个单词用-连接),this.msg为要传递的参数。
this.$emit('cus-event', this.msg);
},
getMsg(str) {
console.log('子级组件收到父级的内容', str);
}
}
};
// 注意: .$mount('#app')跟实例内部el: '#app'是等价的
new Vue({
data: {
msg: '',
szStr:'父级消息'
},
components: {
child
},
methods: {
doAction(e) {
console.log(this);
console.log(e);
this.msg = e;
},
useChild(str) {
// 调用子组件的方法
// console.log(this);
// console.log(this.$refs);
// this.$refs.child1得到的子组件实例
this.$refs.child1.getMsg(str);
}
}
}).$mount('#app');
效果图
总结
以上所述是小编给大家介绍的Vue子组件向父组件通信与父组件调用子组件中的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!
以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。
-
vue 子组件与父组件的通信
2019-05-21 11:26:03子组件调父组件的方法 在子组件中通过 this.$parent.event 通过 $emit 触发一个事件,父组件监听这个事件 通过 prop 传入父组件的方法 父组件 Home.vue <template> <div class="bor"> <h3>{{...子组件调父组件的方法
- 在子组件中通过 this.$parent.event
- 通过 $emit 触发一个事件,父组件监听这个事件
- 通过 prop 传入父组件的方法
父组件 Home.vue
<template> <div class="bor"> <h3>{{title}}</h3> <HelloWorld @fatherMethod="changeTitle" :changeFatherTitleMethod="changeTitle" ></HelloWorld> </div> </template> <script> import HelloWorld from '@/components/HelloWorld'; export default { data () { return { title: '父组件 home' } }, components: { HelloWorld }, methods: { changeTitle(text) { this.title = text; } } } </script> <style scoped> .bor { padding: 5px; margin: 5px; border: solid 1px #000; } </style>
子组件 HelloWorld.vue
<template> <div class="bor"> <h3>子组件 hello world!</h3> <button @click="changeParentTitle1">通过 this.$parent.event 调用父组件的方法</button> <button @click="changeParentTitle2">通过 $emit 触发一个事件,父组件监听这个事件</button> <button @click="changeParentTitle3">通过 prop 传入父组件的方法</button> </div> </template> <script> export default { props: { changeFatherTitleMethod: { type: Function } }, data () { return { } }, methods: { changeParentTitle1() { this.$parent.changeTitle('通过 this.$parent.event 调用父组件的方法'); }, changeParentTitle2() { this.$emit('fatherMethod', '通过 $emit 触发一个事件,父组件监听这个事件'); }, changeParentTitle3() { this.changeFatherTitleMethod('通过 prop 传入父组件的方法'); } } } </script> <style scoped> .bor { padding: 10px; margin: 5px; border: solid 1px #000; } button { width: 100%; margin: 5px 0; padding: 10px; } </style>
父组件调用子组件的方法
-
通过 $refs 调用子组件的方法
-
通过 $emit 触发事件, 子组件监听该事件
父组件 Home.vue
<template> <div class="bor"> <h3>{{title}}</h3> <HelloWorld ref="hello"></HelloWorld> <button @click="changeChildTitle1">通过 $refs 调用子组件的方法</button> <button @click="changeChildTitle2">通过 $emit 触发事件, 子组件监听该事件 </button> </div> </template> <script> import HelloWorld from '@/components/HelloWorld'; export default { data () { return { title: '父组件 home' } }, components: { HelloWorld }, methods: { changeChildTitle1() { this.$refs.hello.changeTitle('父组件 通过 $ref 调用子组件的方法'); }, changeChildTitle2() { this.$refs.hello.$emit('changeTitle'); } } } </script> <style scoped> .bor { padding: 5px; margin: 5px; border: solid 1px #000; } button { width: 100%; margin: 5px 0; padding: 10px; } </style>
子组件
<template> <div class="bor"> <h3>{{title}}</h3> </div> </template> <script> export default { data () { return { title: '子组件 hello world!' } }, methods: { changeTitle(text) { this.title = text; } }, mounted() { this.$on('changeTitle', ()=> { this.changeTitle('父组件通过 $emit 触发事件, 子组件监听该事件 '); }); } } </script> <style scoped> .bor { padding: 10px; margin: 5px; border: solid 1px #000; } button { width: 100%; margin: 5px 0; padding: 10px; } </style>
-
vue中子组件和子组件之间怎么通信_Vue子组件向父组件通信与父组件调用子组件中的方法...
2020-12-22 20:24:46子组件向父组件通信子组件的button按钮绑定点击事件,事件方法名为sendToParent(),该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);在父组件引入子组件,并给cus-event事件绑定doAction($...子组件向父组件通信
子组件的button按钮绑定点击事件,事件方法名为sendToParent(),
该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);
在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e),
而msg已经在data中声明,其值为”子级消息”,故最终的输出结果为: 展示父级接收到的消息:子级消息
父组件调用子组件中的方法
点击父组件的button按钮,触发了click事件指向的useChild方法[该方法的行为是输出”父级消息”],
useChild方法在父组件的中的methods中声明,调用子组件中的方法,并传入参数str,即this.$refs.child1.getMsg(str);
而getMsg方法已经在子组件的methods中声明,其行为是console.log('子级组件收到父级的内容',str);,
所以,最终的输出结果为: 子级组件收到父级的内容 父级消息
代码示例(结合上面的分析理解代码)
子向父通信
效果图
总结
以上所述是小编给大家介绍的Vue子组件向父组件通信与父组件调用子组件中的方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
-
Vue 子组件和父组件传递数据与方法的例子
2020-10-16 15:31:31Vue 子组件和父组件传递数据与方法</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> </style> </head> <b<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 子组件和父组件传递数据与方法</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> </style> </head> <body> <div id="app"> <parent></parent> </div> <script> Vue.component('parent',{ template:'<div><child :Name="name" :Age="age" @Add="add"></child></div>', data(){ return { name:'jcy', age:30 } }, methods:{ add(age){ //add方法接受子组件传递的数据 this.age = age } } }) Vue.component('child',{ template:'<div><p>我叫:{{ Name }},我今年{{ Age }}</p><button @click="add">加一岁</button></div>', props:{ //接受父组件传递的数据 Name:{ type:String, default:'ok', }, Age:{ type:Number, default:18 }, }, methods:{ add() { this.$emit('Add',this.Age += 1)//接受父组件传递的方法,并且带参数向父组件传送数据 } } }) var vm = new Vue({ el: '#app', data(){ return {} } }) </script> </body> </html>
-
vue 子组件与父组件之间传值
2020-05-15 17:24:251.父组件向子组件传值 1.1 在子组件的标签上绑定一个自定义属性,值为父组件要传递的数据。 1.2 在子组件内部用props属性来接收属性名,属性名指代传递的数据。 2.子组件向父组件传值 利用vue中的$emit将想... -
Vue子组件与父组件传值方式以及它们之间调用彼此的方法
2020-04-25 16:19:19子组件通过props获取父组件传来的值 //父组件main.vue <template> <div> <child :data="message"></child> </div> </template> <script> data(){ return{ message:'... -
Vue 子组件与父组件之间的 双向数据绑定
2019-05-21 15:16:52方法一(常规) 父组件传递数据到子组件;...但是此时,父组件如果更新了name 值,但是子组件中的 iName 不会随之更改;所以要监听父组件传入数据的变化,随之更新子组件; watch: { // 监听父组件传... -
vue父组件调用子组件方法this 指向问题_Vue实战030:子组件与父组件之间方法调用...
2021-02-04 10:45:14前面我分享了vue实战027:子组件和父组件之间传值,今天继续分享子组件与父组件之间方法调用,在项目实战中我们经常会遇到组件之间方法调用的情况。Vue同样为我们准备了相关的方法来实现,他们就是$root、$parent、$... -
vue父组件调用子组件的方法,子组件调用父组件的方法
2018-12-27 11:06:32vue父组件调用子组件的方法,子组件调用父组件的方法 插入链接与图片 链接: link. 图片: 带尺寸的图片: 代码: //父组件 <template> <div> <childItem ref="childAct&... -
vue中父组件获取子组件的数据与方法,子组件获取父组件中的数据与方法
2019-09-26 18:10:15父组件获取子组件中的数据与方法 1.调用子组件的时候,通过设置ref <Child ref="child"></Child> 2.在父组件中通过 this.$refs.child.属性 //this.$refs 获取子组件中的内容 this.$refs.child.方法 父... -
Vue入门-子组件向父组件通信与父组件调用子组件中的方法
2018-06-21 11:38:11子组件向父组件通信子组件的button按钮绑定点击事件,事件方法名为sendToParent(),该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);在父组件引入子组件,并给cus-event事件绑定doAction($... -
vue父组件与子组件方法传递emit与props
2020-10-18 19:32:09vue项目中父组件与子组件通信,除了数据传递之外,少不了方法的传递,通常情况下我们使用的父子组件方法传递是通过emit或者props,以下是两种方法的具体使用方法。 2、实例 方法一:使用emit emit是使用在子组件内的... -
for里面调用方法 vue_Vue实战030:子组件与父组件之间方法调用
2020-12-30 19:25:25前面我分享了vue实战027:子组件和父组件之间传值,今天继续分享子组件与父组件之间方法调用,在项目实战中我们经常会遇到组件之间方法调用的情况。Vue同样为我们准备了相关的方法来实现,他们就是$root、$parent、$... -
Vue组件总结。父组件与子组件的运用
2020-08-18 16:11:39把父组件的方法传递给子组件2. 组件注册1. 组件名2. 全局注册与局部注册。3. 模块系统 1.基础组件 1. 基本概念 组件是可复用的Vue实例。如果网页中的某一个部分需要在多个场景中使用,那么我们可以把这部分功能抽取... -
【Vue 父组件与子组件 02】----父组件调用子组件的方法
2020-04-13 15:08:51父组件中: 对于ref官方的解释是:ref 是被用来给元素或子组件注册引用信息的 子组件中: -
【vue】父向子组件传参、子组件向父传参、vue中父组件调用子组件函数、子组件向父组件调用方法
2019-05-25 18:05:161.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成...而子组件componetA中,声明props参数’msgfromfa’之后,就可以收到父向子组件传的参数了。例子中... -
Vue实战030:子组件与父组件之间方法调用
2019-07-11 09:46:09前面我分享了vue实战027:子组件和父组件之间传值,今天继续分享子组件与父组件之间方法调用,在项目实战中我们经常会遇到组件之间方法调用的情况。Vue同样为我们准备了相关的方法来实现,他们就是$root、$parent、$... -
vue父组件向子组件传值与传递方法
2020-07-14 15:36:16vue父组件向子组件传值与传递方法 学习笔记 1、父组件向子组件传值(props) 在子组件中,默认是无法访问到父组件中的data上的数据和methods中的方法 父组件可以在引用子组件的时候,通过属性绑定v-bind传递,子... -
vue父组件调用子组件的方法
2017-05-23 09:33:50子组件与父组件 它们之间通信有几种方法有: props 自定义事件 vuex 今天我们聊一下父组件调用子组件的一种方法 parent.vue <template> <div> <h1>我是父组件</h1... -
Vue组件,父组件与子组件交互
2020-06-11 10:22:07文章目录Vue组件简介使用组件使用Vue.extend来使用组件不使用extend组件的组件使用全局注册组件中的data()与methods()私有组件组件的切换父组件向子组件传递值父组件向子组件传递方法父组件调用子组件的方法 Vue... -
Vue入门-父组件向子传值与子组件调用父组件中的方法
2018-06-21 10:52:43Vuex是什么?一般用于中大型项目,管理组件中的传值方式,相当于angular中的全局服务,里面有store声明的属性可以共享,每个组件都可以绑定。...注意:子组件要接收父组件传进来的值,那么一定要放在pr...
-
cmd与npm的基本知识
-
【精品】2021首款揭秘主力做庄过程波段分析操作指标套装
-
Delani-studio:Delani工作室网站显示其服务以及如何通过表格与他们联系。 使用下面的链接去网站-源码
-
织梦响应式环保新材料类网站织梦模板(自适应手机端)
-
织梦生活健身瑜伽类网站织梦模板(带手机版)
-
FFmpeg4.3系列之16:WebRTC之小白入门与视频聊天的实战
-
python-for-loops-lab-ds-apply-000-源码
-
TSINGSEE青犀视频开发rtp推流如何使用ffmpeg配置rtp打包模式?
-
api-error-handler:JSON API的快速错误处理程序-源码
-
2021-03-01
-
织梦响应式投资管理类网站织梦模板(自适应手机端)
-
Leetcode101 - 110
-
LVS + Keepalived 实现 MySQL 负载均衡与高可用
-
MySQL 管理利器 mysql-utilities
-
华为1+X认证——网络系统建设与运维(初级)
-
基于SSM实现的房屋租赁系统【附源码】(毕设)
-
深究字符编码的奥秘,与乱码说再见
-
ios-components:用于iOS开发的可重用组件的集合-源码
-
Samba 服务配置与管理
-
2B获客新技巧:官网+功能表单妙用三部曲(一)