vue 父子组件传值父子组件方法互相调用问题

2019-08-16 admin

传值问题

父传子

父组件

<div>
  <!-- :fatherName 是传到子组件的变量名, fatherName是父组件的data的属性值 -->
  <son-component :fatherName='fatherName' />
</div>
<script>
  name:'father-component',
  data:{
    return:{
      fatherName:'father-component'
    }
  },
</script>

子组件

<div>
  {{fatherName}}
</div>
<script>
  name:'son-component',
  props:['fatherName']
</script>

子传父

父组件

<div>
  <!-- :fatherName 是传到子组件的变量名, fatherName是父组件的data的属性值 -->
  <son-component @fatherMethod='fatherMethod' />
</div>
<script>
  name:'father-component',
  methods:{
    fatherMethod(data){
      console.log('子组件传值',data)
    }
  }
</script>

子组件

<div>
  <input v-model='sonValue' @change="sendToFather" />
</div>
<script>
  name:'son-component',
  data:{
    return:{
      sonValue:'',
    }
  },
  methods:{
    sendToFather(){
      // 说白了就是用 this.$emit()调用父组件的方法的同时传值
      this.$emit('fatherMethod',sonValue)
    }
  }
</script>

方法调用问题

父调子

方法一: 使用$refs 父组件

<div>
  <button @click="useSonMethon">click</button>
  <!-- :fatherName 是传到子组件的变量名, fatherName是父组件的data的属性值 -->
  <son-component ref='sonComponent' />
</div>
<script>
  name:'father-component',
  methods:{
    useSonMethon(){
      this.$refs.sonComponent.sonMethod()
    }
  }
</script>

子组件

<div>
</div>
<script>
  name:'son-component',
  methods:{
    sonMethod(){
      console.log('111')
    }
  }
</script>

子调父

方法一: 使用 this$emit()调用父组件方法,参见 传值问题:子传父 方法二: 使用 this.$parent 父组件

<div>
  <son-component />
</div>
<script>
  name:'father-component',
  methods:{
    fatherMethod(){
      this.$refs.sonComponent.sonMethod()
    }
  }
</script>

子组件

<div>
  <Button @click="useFatherMethod"></Button>
</div>
<script>
  name:'son-component',
  methods:{
    useFatherMethod(){
      // 注意,我在用的过程中使用this.$parent方法时找不到父组件的方法,无意间看到这篇文章https://segmentfault.com/a/1190000017030948 说是ui框架的组件包裹了子组件导致了方法未定义的问题
      this.$parent.fatherMethod()
    }
  }
</script>

方法三:把父组件方法当参数传给子组件 父组件

<div>
  <!-- :fatherName 是传到子组件的变量名, fatherName是父组件的data的属性值 -->
  <son-component :fatherMethod='fatherMethod' />
</div>
<script>
  name:'father-component',
   methods:{
    fatherMethod(){
      this.$refs.sonComponent.sonMethod()
    }
  }
</script>

子组件

<div>
  <Button @click="useFatherMethod"></Button>
</div>
<script>
  name:'son-component',
  props:{
    fatherMethod: {
        type: Function,
        default: null
      }
  },
  methods:{
    useFatherMethod(){
      if (this.fatherMethod) {
        this.fatherMethod();
      }
    }
  }
</script>

补充,如果遇到比较复杂的,多层级组件之间的传值问题,建议使用vuex加缓存,否则你马上就会被互相传值、方法互相调用折磨的头皮发麻

[转载]原文链接:https://segmentfault.com/a/1190000020093136

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72682.html

文章标题:vue 父子组件传值父子组件方法互相调用问题

相关文章
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
javascript教程:关于if简写语句优化的方法
UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法。尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作。也许有人认为if语句就那么简单,能优化...
2015-11-12
freemarker判断对象是否为空的方法
FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术,而且还可以用于生成XML,JSP或Java 等。 freemarker中显示某对象使用${name}. 但如果nam...
2017-03-27
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
回到顶部