Vue子组件调用父组件的方法及传值「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

一、通过$ref的方式

//父组件
<template>
  <div class="home">
    <myBox ref="myBox"></myBox>
    <div @click="handelClick">click me</div>
  </div>
</template>
<script>
  import myBox from '@/components/myBox.vue'
  export default { 
   
    name: 'home',
    components: { 
   
      myBox
    },
    methods: { 
   
      handelClick() { 
   
        this.$refs.myBox.init("传递的值");
      }
    }
  }
</script>

//子组件
<template>
  <div class="myBox">
    <h1>我是子组件</h1>
  </div>
</template>
<script>
  export default { 
   
    name: 'myBox',
    methods: { 
   
      init(val) { 
   
        console.log(val)
      }
    }
  }
</script>

二、通过props的方式

// 父组件
<template>
  <div>
    <h1>父组件</h1>
    <myBox :dataFrom="data"></myBox>
  </div>
</template>
 
<script>
  import myBox from '@/components/myBox.vue'
  export default { 
   
    name: 'home',
    components: { 
   
      myBox
    },
    data() { 
   
      return { 
   
        data:"传递的值"
      }
    }
  }
</script>

// 子组件
<template>
  <div>
    <h1>子组件</h1>
    <p>下面是父组件传过来的数据</p>
    <p>{ 
   { 
   fromData}}</p>
  </div>
</template>
  
<script>
export default { 
   
   props: { 
   
    fromData: { 
   
      type: String,
      default: 'hello world'
    }
  }
  data () { 
   
    return { 
   
  
    };
  }
}
</script>

三、用$emit向父组件触发一个事件，父组件监听这个事件

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

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