vue子组件主动调用父组件的方法或者参数

一、父组件在用子组件时候，可以把父组件的参数或者方法传给子组件，子组件可以直接调用

父组件：<child-first :value="form">

子组件中：

name: "child-first",

props:{//接收父组件传过来的值

value:{}

在js中可直接调用：this.value

在html中直接使用：<span>value</span>

二、子组件主动获取父组件的方法：

　　1.子组件直接调用父组件的方法或者data：

　　　　this.$parent.value;//获取父组件的值value

　　　　thisd.$parent.run();//运行父组件的方法

　　但是注意有个坑：调用时候获取不到值或者父组件的方法，咋回事呢原来我用的是ivew，第三方组件，所以在子组件中获取父组件，获取到的不一定是自己写的这个组件，而是第三方的组件，第三方的组件肯定没有相对应的值或者方法了啊！？

　　那咋办呢？

　　2.那就把父组件对象传递给子组件，在子组件里边拿着父组件调用父组件的值或者方法：

<child-first :value="form" :father="this"></child-first>//父组件 把当前对象传过去

　　在子组件中

  //接收父组件传过来的对象  
props:{
      value:{},
      father:Object
  },

//调用父组件的值或方法
console.log("===============",this.father.res)
this.father.getUserName()

3.也可以把父组件的方法传递给子组件，在子组件里边调用：

父组件：
//定义方法：
    fatherFunction(arg){
           console.log("这是父组件的方法:"+arg)
       }
//组件传递：
    <child-first  @fatherFunction = "fatherFunction"></child-first>

子组件：
//调用：
this.$emit('fatherFunction', this.res)//第一个参数是方法名，第二个为传递的参数

以下是全部代码（用的第三方组件库，看看就行了，别复制）

<template>
  <card class="content">
    <p>这是父组件</p>姓名：
    <Input v-model="form.name" placeholder="Enter something..." clearable />年龄：
    <Input v-model="form.age" placeholder="Enter something..." clearable type="number" />
    <Divider />
    <Button type="info" @click="sendFirst">传值给第一个孩子</Button>
    <Button type="success" @click="getFirst">从第一个孩子取值</Button>
    <Button type="warning">Warning</Button>
    <Button type="error">Error</Button>
    <Divider />结果：
    <Input v-model="res" type="textarea" :rows="4" placeholder="result" />
    <Divider />
    <Row :gutter="16">
        <Col span="12"><child-first :value="form" :father="this" @fatherFunction = "fatherFunction"></child-first></Col>
        <Col span="12"><child-second></child-second></Col>
    </Row>
    
  </card>
</template>
<script>
import ChildFirst from './components/child-first.vue'
import ChildSecond from './components/child-second.vue'
export default {
  name: "data-manager",
  components:{ChildFirst,ChildSecond},
  data() {
    return {
      form: {
        name: "admin",
        age: 12
      },
      res: "123"
    };
  },
  mounted(){},
  methods:{
       sendFirst(){

       },
       getFirst(){

       },
       getUserName(){
           console.log("这是父组件的方法")
       },
       fatherFunction(arg){
           console.log("这是父组件的方法:"+arg)
       }
  }
};
</script>
<style lang="less" scoped>
.content {
  margin-top: 20px;
  text-align: left;
  overflow: scroll;
  background-color: #f0f0f0;
  height: 800px;
  p {
    text-align: left;
    margin-bottom: 20px;
  }
}
</style>

然后：

<template>
  <Card class="content" :dis-hover="true" title="我是第一个子标签">
    <Divider />姓名：
    <Input v-model="form.name" placeholder="Enter something..." clearable />年龄：
    <Input v-model="form.age" placeholder="Enter something..." clearable type="number" />
    <Divider />
    <Button type="info" @click="getFather">获取父组件的值</Button>
    <Button type="success">Success</Button>
    <Button type="warning">Warning</Button>
    <Button type="error">Error</Button>
    <Divider />
    <Divider />结果：
    <Input v-model="res" type="textarea" :rows="4" placeholder="result" />
    <Divider />
  </Card>
</template>

<script>
export default {
  name: "child-first",
  props:{
      value:{},
      father:Object,
    //   getUserName:{//发现写不写都行
    //       type:Function
    //   }
  },
  data() {
    return {
      form: {
        name: "llee",
        age: 21
      },
      res: "result"
    };
  },
  mounted(){
      this.form = this.value;
  },
  methods:{
      getFather(){
          console.log("===============",this.father.res)
          this.father.getUserName()
          this.res = this.father.res;

          this.$emit('fatherFunction', this.res)
      }
  }
};
</script>
<style lang="less" scoped>
.content {
  margin-top: 20px;
  background-color: #97c9a7;
}
</style>

好了，等会写一下其他传值方式

vue子组件主动调用父组件的方法或者参数

猜你喜欢