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>

好了 ，等會寫一下其他傳值方式