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

2024年1月28日 218次阅读 来源: liuoomei

传值问题

父传子

父组件

<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>

方法四：使用vue 的依赖注入的方法

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

    原文作者：liuoomei
    原文地址: https://segmentfault.com/a/1190000020093136
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞