1.子组件直接调用父组件的数据和方法

在父组件father,vue

<template>
<div>
<!-- 父组件里面的数据 -->
<p>父组件里面的数据{{data}}</p> <!-- 父组件里面的方法 -->
<p click="test">父组件里面的方法方法方法方法</p>
<!-- 使用组件 -->
<child></child>
</div>
</template>
<script>
import child from './components/child.vue'// 引入子组件
export default {
components:{
//注册组件
child
},
data(){
return{
data:'我的父组件data'
}
},
methods:{
test(){
console.log('点击了父组件')
}
}
}
</script>

下面在子组件中调用父组件的数据和方法

<template>
<div>
<button @click="toFather">我是子组件 {{this.$parent.data}}</button>
<!-- this.$parent.data获取父组件的数据 -->
</div>
</template>
<script>
export default {
data(){
return{}
},
methods:{
toFather() {
// 直接通过this.$parent.test()获取方法
this.$parent.test()
}
}
}
</script>

总结:

直接在子组件中   this.$parent.prop  调用的数据

this.$parent.fn()    调用的方法

2.父组件直接调用子组件的数据和方法

父组件调用子组件的地方,添加一个ref的属性,属性值任意定义  即在父组件组件中 father.vue

<template>
<div>
我是父组件
<!--调用子组件组件 添加ref属性 -->
<child ref="getdata"></child>
<button @click="getChild">点击按钮获取子组件的数据msg</button>
</div>
</template>
<script>
import child from './components/child.vue'// 引入子组件
export default {
components:{
//注册组件
child
},
data(){
return{
}
},
methods:{
getChild(){
// this.$refs.getdata.msg 拿到数据
console.log(this.$refs.getdata.msg)
}
}
}
</script>

child.vue的数据

<template>
<div>
<button>我是子组件</button>
</div>
</template>
<script>
export default {
data(){
return{
msg:'我是子组件数据'
}
},
methods:{
}
}
</script>

总结:

  父组件调用子组件的地方,添加一个ref的属性,属性值任意定义
  父组件某一个事件中,可以通过this.$refs.test.prop拿到子组件的数据,可以通过this.$refs.test.fn()调用子组件的方法

vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法的更多相关文章

  1. 关于Vue中,在方法中使用(操作)子组件获取到的数据

    已知,子组件通过props获取父组件传过来的数据,而这个数据是无法在created.mounted生命周期中使用的,只能在beforeUpdated或者updated获取到: 但是如果我们要使用这个数 ...

  2. 父组件调用子组件中的方法- this.$refs.xxx.子组件方法();

    子组件中有一个说的方法 在父组件中去调用当你点击的时候 去调用子组件中的方法 fu.vue 在父组件的方法中调用子组件的方法,很重要 this.$refs.mychild.parentHandlecl ...

  3. 父组件中vuex方法更新state,子组件不能及时更新并渲染的解决方法

    场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...

  4. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  5. Vue父组件调用子组件的方法

    vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用,例如: 父组件: <template> <div @click ...

  6. vue中父组件调用子组件函数

    用法: 子组件上定义ref="refName",  父组件的方法中用 this.$refs.refName.method 去调用子组件方法 详解: 父组件里面调用子组件的函数,父组 ...

  7. vue父组件调用子组件资源

    通过上篇博文提到的方法我们可以触发子组件的某个事件来实现调用子组件的某些资源(例如数据和方法),但是更多的情况下我们会想不通过触发子组件的事件,而直接调用子组件的资源 这个时候我们就需要用到ref了, ...

  8. 关于Vue中,父组件获取子组件的数据(子组件调用父组件函数)的方法

    1. 父组件调用子组件时,在调用处传给子组件一个方法 :on-update="updateData"   2. 子组件在props中,接收这个方法并声明 props: { onUp ...

  9. 埋坑一: vue中子组件调用兄弟组件方法

    小计: 开发中遇到子组件需要调用兄弟组件中的方法,如下写个小demo记录下心得,如果你有好的方法,请到评论区域指教 父组件示例代码: 组件功能解析: 通过$emit获取子组件事件,通过$ref调用子组 ...

  10. vue 父组件中调用子组件函数

    2019/06/06 在父组件中调用子组件的方法:  1.给子组件定义一个ref属性.eg:ref="childItem"  2.在子组件的methods中声明一个函数.eg: u ...

随机推荐

  1. rabbitmq系列问题解决:406, "PRECONDITION_FAILED - inequivalent arg 'durable'

    1. 安装rabbitmq,查看官网文档: https://www.rabbitmq.com/#getstarted 由于我是先安装了rabbitmq后自己随手创建了queue,后面又按照官方给的&q ...

  2. Git 版本回退的几种操作方法

    1, 结合使用 git reset --hard <commit id> , git reset --hard HEAD^,  git reflog , git log 1) 使用 git ...

  3. Failed to set locale, defaulting to C

    echo "export LC_ALL=en_US.UTF-8" >> /etc/profile source /etc/profile 没有设置local环境

  4. JS对象简介

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 三分钟快速上手TensorFlow 2.0 (后续)——扩展和附录

    TensorFlow Hub 模型复用 TF Hub 网站 打开主页 https://tfhub.dev/ ,在左侧有 Text.Image.Video 和 Publishers 等选项,可以选取关注 ...

  6. Linux - Shell - 字符串截取

    概述 简述 字符串 截取 背景 之前因为要给文件 批量重命名, 做过字符串截取 当时做好了, 也说了要写点东西 结果忘了 现在又要尝试批量 重命名 才发现之前的东西已经忘了好多 要是当时把博客写下来, ...

  7. TWF

    design seq1_b3 sta_label 0.0-1.0 0.0-1.0 1e-9 # clocks# clockID clock_name period rise_edge fall_edg ...

  8. root xshell登陆Ubuntu

    https://www.jianshu.com/p/c8ee39488d2a xshell测试非root用户,可以正常连接,但是root用户仍旧无法访问 解决方法:修改 /etc/ssh/sshd_c ...

  9. ET框架之SceneChangeComponent

    初始化事件 using ETModel; namespace ETHotfix { [Event(EventIdType.InitSceneStart)] public class InitScene ...

  10. js基础之--变量 作用域和内存问题

    基本类型:Undefind Null Boolean Number String 引用类型: 对象 在操作对象时,实际上实在操作对象的引用而不是实际的对象.为此,引用类型的值是按引用访问的. 从一个变 ...