Vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

111111
https://blog.csdn.net/qq_39338967/article/details/130484676

父组件主动获取子组件的数据和方法=============







父组件主动获取子组件的数据和方法

父组件主动获取子组件的数据和方法==================


1、SubVue.vue子組件：

<template>
   <div class="subVue">
         {{msg}}
   </div>
</template>

<script>
export default {
    data(){
        return{
           msg: 'SubVue.vue',
           subTitle: '子組件中的变量--subTitle标题！'
        }
    },
    methods:{
       subMt(){
       
          console.log("==当前子页面==子組件中的无参方法--subVue--subMt()--不传参方法");
       },
       subParamMt(param){
        
          console.log("==当前子页面==子組件中的有参方法--subVue--subParamMt(param)
--传参["+param+"]方法");
       }
    }
}
</script>
<style>

 .subVue{
    
    background:rgb(83, 177, 83);
    width:800px;
    height:200px;
    font-size:40px;
    margin-top:200px;
 
 }
</style>

2、ParentVue.vue

<template>
  <div class="parentView">
      {{msg}}
      <br>
        // ref=”自定义组件名”
       <v-subvue ref="subvue"></v-subvue>
       <br>
       <button  @click="sx()">调用子组件的属性msg\subTitle</button>
       <button  @click="noparams()">调用子组件的无参方法</button>
       <button  @click="hasparams('123456')">调用子组件的有参方法</button>
  
  </div>
</template>

<script>

import SubVue  from  '@/views/SubVue'
export default {
data(){
    return{
     
     msg:'ParentView.vue'
    }
},
components:{
    'v-subvue':SubVue
},
methods:{
   sx(){
       //父组件调用子组件中的subtitle属性；
       //子組件中的msg參數
       this.$refs.subvue.msg;
       console.log("==当前子页面=====子組件中的msg參數==="+this.$refs.subvue.msg);
       this.$refs.subvue.subTitle;
       console.log("==当前子页面=====子組件中的subTitle參數= =="+this.$refs.subvue.subTitle);
   },
   noparams(){
       this.$refs.subvue.subMt();
      
   },
   hasparams(params){
       this.$refs.subvue.subParamMt(params);
   }
}
}
</script>
<style>
 .parentView{
    background:honeydew;
    width:800px;
    height:200px;
    font-size:40px;
 }
</style>

子组件主动获取父组件的数据和方法

=子组件主动获取父组件的属性和方法============