vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法

vue中组件之间调用方法——子组件调用父组件的方法 & 父组件调用子组件的方法

1.vue中子组件调用父组件的方法

1.1、第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。

父组件-fat.vue

<template><div><child></child></div>
</template>
<script>import child from '~/components/dam/child';export default {components: {child},methods: {fatherMethod() {console.log('测试');}}};
</script>

子组件-son.vue

<template><div><button @click="childMethod()">点击</button></div>
</template>
<script>export default {methods: {childMethod() {this.$parent.fatherMethod();}}};
</script>

1.2、第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

父组件-fat.vue

<template><div><child @fatherMethod="fatherMethod"></child></div>
</template>
<script>import child from '~/components/dam/child';export default {components: {child},methods: {fatherMethod() {console.log('测试');}}};
</script>

子组件-son.vue

<template><div><button @click="childMethod()">点击</button></div>
</template>
<script>export default {methods: {childMethod() {this.$emit('fatherMethod');}}};
</script>

1.3、第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

父组件-fat.vue

<template><div><child :fatherMethod="fatherMethod"></child></div>
</template>
<script>import child from '~/components/dam/child';export default {components: {child},methods: {fatherMethod() {console.log('测试');}}};
</script>

子组件-son.vue

<template><div><button @click="childMethod()">点击</button></div>
</template>
<script>export default {props: {fatherMethod: {type: Function,default: null}},methods: {childMethod() {if (this.fatherMethod) {this.fatherMethod();}}}};
</script>

2.父组件调用子组件的方法

2.1、通过ref直接调用子组件的方法

//父组件中<template><div><Button @click="handleClick">点击调用子组件方法</Button><Child ref="child"/></div>
</template>    <script>
import Child from './child';export default {methods: {handleClick() {this.$refs.child.sing();},},
}
</script>//子组件中<template><div>我是子组件</div>
</template>
<script>
export default {methods: {sing() {console.log('我是子组件的方法');},},
};
</script>

2.2、通过组件的 e m i t 、 emit、 emit、on方法

//父组件中<template><div><Button @click="handleClick">点击调用子组件方法</Button><Child ref="child"/></div>
</template>    <script>
import Child from './child';export default {methods: {handleClick() {this.$refs.child.$emit("childmethod")    //子组件$on中的名字},},
}
</script>//子组件中<template><div>我是子组件</div>
</template>
<script>
export default {mounted() {this.$nextTick(function() {this.$on('childmethods', function() {console.log('我是子组件方法');});});},
};
</script>

vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法相关推荐

Vue中父子之间的通信
在学习vue中,往往会碰到父子组件之间的通信问题,用一张图来简单解释下父子之间如何通信由图可以知道父组件传递参数给子组件子组件通过props接收参数父子通信代码演示: <!DOCTYP ...
vue中数据之间的传递用propos
子集父集以上是子父集互相传递数据. 传参数的时候是以对象的形式展示的,封装在propos中的. 如果默认值是string或者number类型,那么可以用default表示. 如果默认值是objec ...
Vue中的（computed）计算属性和（watched）侦听属性以及（methods）方法
1. computed 计算属性可用于快速计算视图中显示的属性. 这些计算将被缓存,并且只在需要时更新. 他的方法不需要在data里面定义它们完全是同步的. <div class=" ...
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
Vue组件之间的通信-父传子-子传父
文章目录 Vue的组件嵌套 Vue组件间通信 1.父组件传递给子组件 1.1数组的方式 1.2对象的方式 2.子组件传递给父组件 Vue的组件嵌套前面我们是将所有的逻辑放到一个App.vue中: 在 ...
vue组件之间8种组件通信方式总结
对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的各种方式的总结,总共有8种方式. 1.props和$emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父 ...
Vue学习——组件基础之父子组件之间的传值
一.父组件向子组件传值作用:因为在Vue的组件化开发中页面的各个功能模块对应各个组件,组件之间的传值变得尤为重要. 举例:父组件相当于导航栏,子组件相当于点击导航栏之后显示对应的内容界面:点击导航栏 ...
vue各组件之间多种通信方式
重点:vue的两大特性是响应式编程和组件化.组件(Component)是 Vue 最核心的功能,但是各个组件实例的作用域是相互独立的,这表明不同组件之间的数据是无法直接相互引用的.如果想要跨组件引用数 ...
vue 组件之间的通信
目录前言一.props 和 $emit 二.$attrs 和 $listeners 三.eventBus--$emit 和 $on 四.provide 和 inject(跨组件通信) 1.认识 p ...
vue 组件不受全局样式影响_Vue 组件之间样式冲突
Vue 组件之间样式冲突 vue 组件化,各组件内都可以在 style 部分写样式,这些样式却不是相互独立的,最终组合在一起,难免就会产生样式的污染. 首先来看一下两个 vue 组件代码: 1.Par ...

vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法

vue中组件之间调用方法——子组件调用父组件的方法 & 父组件调用子组件的方法

1.vue中子组件调用父组件的方法

1.1、第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。

1.2、第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

1.3、第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

2.父组件调用子组件的方法

2.1、通过ref直接调用子组件的方法

2.2、通过组件的 e m i t 、 emit、 emit、on方法

vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法相关推荐

最新文章

热门文章

vue中组件之间调用方法——子组件调用父组件的方法 父组件调用子组件的方法

vue中组件之间调用方法——子组件调用父组件的方法 & 父组件调用子组件的方法

1.vue中子组件调用父组件的方法

1.1、第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。

1.2、第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

1.3、第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

2.父组件调用子组件的方法

2.1、通过ref直接调用子组件的方法

2.2、通过组件的 e m i t 、 emit、 emit、on方法

vue中组件之间调用方法——子组件调用父组件的方法 父组件调用子组件的方法相关推荐

最新文章

热门文章

vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法

vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法相关推荐