vue父子組件的互相傳值和調(diào)用

更新時(shí)間：2021年04月22日 14:58:15 作者：Louis碼農(nóng)工具人

這篇文章主要介紹了vue父子組件的互相傳值和調(diào)用，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下

1、父傳值給子組件

父組件：

<template>
  <div>
    <p class="father">父組件</p>
    <child :sid="id"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components: {
    child
  },
  data() {
    return {
      id:'1234' // 父組件向子組件傳的值
    }
  }
}
</script>

子組件：

<template>
  <div>
    <p class="child">子組件</p>
    <p class="child">接收父組件的值是：{{ sid }}</p>
  </div>
</template>

<script>
export default {
  props:{
    sid:{
      type:String,
      default: '0'
    }
  },
  // props:["sid"],
  data() {
　　　return { 

　　　} 
　} 
} 
</script>

說明：

①sid是在子組件中綁定要傳的值，記住“=”前的sid要和子組件中要接受的變量名要一致

②在子組件中用props來接受傳入的值，可以寫成對象類型，規(guī)定類型和默認(rèn)值，也可以直接寫成字符串

③在子組件中可以直接使用，也可以在函數(shù)中使用this.sid進(jìn)行訪問

2、子傳值給父組件

父組件：

<template>
  <div>
    <p class="father">父組件</p>
　　　 <p class="father">接收到子組件的值：{{childSid}}</p>
    <child @passVaule="parentPassValue"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components: {
    child
  },
  data() {
    return {
      childSid:'' // 接收子組件的值
    }
  },
  methods: {
    parentPassValue(data) {
      this.childSid = data;
    }
  }
}
</script>

子組件：

<template>
  <div>
    <p class="child">子組件</p>
    <button @click="valueClick">傳值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    valueClick() {
      this.$emit('passVaule',19)
    }
  }
}
</script>

說明：

①子組件中給一個(gè)方法去觸發(fā)$emit，第一個(gè)參數(shù)是在父組件引入子組件綁定的函數(shù)名('passVaule')，第二個(gè)是要傳的值(19)

②父組件中綁定一個(gè)函數(shù)，調(diào)用父組件中綁定的函數(shù)，在其中對值進(jìn)行接收操作

3、子調(diào)用父組件中的方法

父組件：

<template>
  <div>
    <p class="father">父組件</p>
    <child @funVaule="parentFunValue"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components: {
    child
  },
  data() {
    return {
    }
  },
  methods: {
    parentFunValue() {
      console.log('調(diào)用了父組件中的函數(shù)');
    }
  }
}
</script>

子組件：

<template>
  <div>
    <p class="child">子組件</p>
    <button @click="funClick">調(diào)用父組件方法</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    funClick() {
      this.$emit('funVaule')
    }
  }
}
</script>

說明：

①這個(gè)和子傳值給父類似，只是不傳值，調(diào)用了父組件的綁定的函數(shù)

4、父調(diào)用子組件中的方法

父組件：

<template>
  <div>
    <p class="father">父組件</p>
    <button @click="childClick">調(diào)用子組件方法</button>
    <child ref="mychild"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components: {
    child
  },
  data() {
    return {
    }
  },
  methods: {
    childClick() {
      this.$refs.mychild.testNum(1)
    }
  }
}
</script>

子組件：

<template>
  <div>
    <p class="child">子組件</p>
</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    testNum(data) {
      console.log('調(diào)用了子組件中的方法:', data);
    }
  }
}
</script>

說明：

① 父組件中在引入的子組件中寫入 ref = "mychild" mychid為自己定義的實(shí)例名

② 在函數(shù)中寫 this.refs.mychild.testNum()， “testNum”為子組件中定義的函數(shù)名

③子組件定義一個(gè)函數(shù)，讓父組件調(diào)用即可

④這個(gè)方法也可以進(jìn)行傳值，在括號中傳入值，子組件接收即可

以上就是vue父子組件的互相傳值和調(diào)用的詳細(xì)內(nèi)容，更多關(guān)于vue父子組件的傳值和調(diào)用的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: