`
- 浏览:
609217 次
- 性别:
- 来自:
上海
-
用$ref调用
直接代码:
子组件:
<template>
<div>
</div>
</template>
<script>
export default {
data(){
return {
num:'123'
}
},
computed: {
},
components: {
'children': children
},
methods:{
childMethod() {
alert('childMethod do...')
}
},
created(){
}
}
</script>
父组件
父组件: 在子组件中加上ref即可通过this.$refs.ref.method调用
<template>
<div @click="parentMethod">
<children ref="c1"></children>
</div>
</template>
<script>
import children from 'components/children/children.vue'
export default {
data(){
return {
}
},
computed: {
},
components: {
'children': children
},
methods:{
parentMethod() {
console.log(this.$refs.c1) //返回的是一个vue对象,所以可以直接调用其方法
this.$refs.c1.childMethod();
同理
}
},
created(){
}
}
</script>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
主要介绍了vue 父组件中调用子组件函数的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
下面小编就为大家分享一篇Vue父组件调用子组件事件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
情景: ... 子组件上定义ref=refName,父组件的方法中用this.$refs.refName.method去调用子组件方法 子组件中处理上传的方法: fileClick(index) { console.log('子组件的fileClick被调用了')
子组件向父组件通信 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), ...父组件调用子组件中的方法 点击父组件的button按钮,触发了click事件指向的useChild方法[该方法的行为是输出”父
主要介绍了vue 使用ref 让父组件调用子组件的方法,需要的朋友可以参考下
在vue项目日常开发中,难免要把功能性组件抽离出来...介绍:这里通过给子组件绑定ref属性,引号命名自定义,然后父组件通过 this.$refs.名字 就可以操作子组件的元素,以改变它的样式等。 <div class=DbSource-box>
今天同事问了一个问题,他在用iview开发时,需要用到iview一个组件的内部方法,而这个内部方法并没有暴露出来,这种情况下如何调用组件内部方法呢,其实很简单,举个栗子:chestnut: 示例代码 子组件: child ...
子组件调用父组件的方法并传递数据 注意:子组件标签中的时间也不区分大小写要用“-”隔开 子组件: <button @click="emitEvent">点击我</button> [removed] export default { data() { return {...
VUE3实用组件开发合集二:时钟、倒计时组件,包括源码,开发文档、素材等。 使用vue3开发时钟、倒计时组件组件,实现电子时钟、钟表、农历、秒表、定时器及各种预定义样式等。封装为组件,可直接调用,通过参数可...
子组件调用父组件效果
主要介绍了Vue element-ui父组件控制子组件的表单校验操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
然鹅 在默认情况下 子组件中是无法访问到父组件中的data数据和methods中的方法的 父组件可在在引用的时候通过属性绑定(v-bind)的方式将将需要传递给子组件的数据传递给子组件 然后 在子组件中通过props属性进行定义...
1、问题原因 因为第一调用渲染子组件后,不再对子组件的created进行调用 2、解决方法 用v-if将子组件包裹起来,因为v-if=false时可以将...以上这篇解决父组件将子组件作为弹窗调用只执行一次created的问题就是小编分享
vue组件递归调用,展示树状结构,