VUE父子組件傳值

IT那活兒發(fā)布于2023-01-11 13:19 / 1660人閱讀

VUE父子組件傳值

點(diǎn)擊上方“IT那活兒”公眾號，關(guān)注后了解更多內(nèi)容，不管IT什么活兒，干就完了?。?！

一

父傳子

父組件：

<template>
  <div>
    父組件:
    <input type="text" v-model="name">
    
    <child :inputName="name">child>
  div>
template>
<script>
  import child from ./child
  export default {
    components: {
      child
    },
    data () {
      return {
        name: 
      }
}
}
script>

子組件：

<template>
  <div>
    子組件:
    <span>{{ inputName }}span>
  div>
template>
<script>
export default {
  props: ["inputName"],//接受父組件值
  data() {},
};
script>

二

子傳父

子組件：

<template>
  <div>
    子組件:
    <span>{{ childValue }}span>
    <input type="button" value="點(diǎn)擊" @click="childClick" />
  div>
template>
<script>
export default {
  data() {
    return {
      data: "子組件數(shù)據(jù)",
    }; },
  methods: {
    childClick() {
      // this.data是需要傳的值
      this.$emit("method", this.data);
    }, },};
script>

父組件：

<template>
  <div>
    父組件:
    <span>{{ name }}span>
    
    <child @method="getInfo"> child>
  div>
template>
<script>
import child from "./child";
export default {
  components: {
    child,
  },
  data() {
    return {
      name: "",
    }; },
  methods: {
    getInfo(data) {
      // childValue就是子組件傳過來的值
      this.name = data;
    }, },};
script>

三

兄弟傳值

通過父組件在中間做中間件，相互傳值（子組件1傳值給父組件，父組件傳值給子組件2）

父組件：

<template>
  <div>
    
    <childA @name="getName">childA>
    
    <childB :value="value">childB>
  div>
template>
<script>
import childA from "./childA";
import childB from "./childB";
export default {
  components: {
    childA,
    childB,
  },
  data() {
    return {
      value: "",
    }; },
  methods: {
    getName(val) {
      this.value = val;
    }, },};
script>

子組件A：

<template>
  <div>
    子組件A:
    <el-input v-model="value">el-input>
    <el-button @click="submit">提交el-button>
  div>
template>
<script>
export default {
  data() {
    return {
      value: "",
    }; },
  methods: {
    submit() {
      //向父組件傳值
      this.$emit("name", this.value);
    }, },};
script>
<style lang="scss">
.el-input {
  width: 200px;
}
style>

子組件2：

<template>
  <div>子組件B:{{ value }}div>
template>
<script>
export default {
  props: ["value"],
};
script>

本文作者：池思敏(上海新炬王翦團(tuán)隊(duì)）

本文來源：“IT那活兒”公眾號

GPU云服務(wù)器云服務(wù)器 vue父子組件通訊父子組件父子組件通信父子組件通訊

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/129206.html

相關(guān)文章

簡單說說vue的父子組件，父子組件傳值和vuex

摘要：我們需要在里改動一下代碼首先就是綁定一個自定義事件再增加然后在中變成就是觸發(fā)父組件中的方法所以，觸發(fā)了父組件的函數(shù)，改變了父組件的的值，父組件再通過傳值給子組件。從而實(shí)現(xiàn)數(shù)據(jù)傳遞，父子組件通信。一、vue的父子組件之間是如何傳值的？首先呢，需要說說的是，vue既然有雙向綁定，那為何會有父子組件之間的傳值問題？這個問題也簡單，vue的組件會供其他的vue頁面進(jìn)行調(diào)用，如果數(shù)組都是雙...

Tecode 2019-08-22 18:31 評論0 收藏0
Vue 父子傳值與子父傳值

摘要：子實(shí)例可以用訪問父實(shí)例，子實(shí)例被推入父實(shí)例的數(shù)組中。節(jié)制地使用和它們的主要目的是作為訪問組件的應(yīng)急方法。更推薦用和實(shí)現(xiàn)父子組件通信我是父組件中的數(shù)據(jù)我是我是號組件我是利用props父子傳值父組件，可以在引用子組件的時候，通過屬性綁定（v-bind:）的形式, 把需要傳遞給子組件的數(shù)據(jù)，以屬性綁定的形式，傳遞到子組件內(nèi)部，供子組件使用創(chuàng)建 Vue 實(shí)例，得到 Vie...

aisuhua 2019-08-23 17:14 評論0 收藏0
vue -- 非父子組件傳值，事件總線（eventbus）的使用方式

摘要：我的個人博客地址資源地址非父子組件傳值，事件總線的使用方式我的博客地址如果您對我的博客內(nèi)容有疑惑或質(zhì)疑的地方，請?jiān)谙路皆u論區(qū)留言，或郵件給我，共同學(xué)習(xí)進(jìn)步。歡迎訪問我的個人博客：http://www.xiaolongwu.cn 前言先說一下什么是事件總線，其實(shí)就是訂閱發(fā)布者模式；比如有一個bus對象，這個對象上有兩個方法，一個是on（監(jiān)聽，也就是訂閱），一個是emit（觸發(fā)，也就...

zone 2019-08-23 14:37 評論0 收藏0
一個故事講懂vue父子組件傳值

摘要：老王用筆在紙上寫了好多內(nèi)容，把紙紙相當(dāng)于，也就是數(shù)據(jù)放進(jìn)了信封信封相當(dāng)于屬性，也就是里，然后給了郵局相當(dāng)于相當(dāng)于一個中介，快遞員進(jìn)行派送，小明來到郵箱相當(dāng)于，看到里邊有封信相當(dāng)于父組件的值，拿了出來。講故事前先講代碼父組件向子組件傳值父組件數(shù)據(jù)傳遞給子組件可以通過props屬性來實(shí)現(xiàn)父組件： import childComponent from ...

xi4oh4o 2019-08-23 18:19 評論0 收藏0
vue中的父子傳值雙向綁定及數(shù)據(jù)修改視圖不更新問題

摘要：在進(jìn)行父子組件傳值時，用到子組件直接控制父組件中的變量值以及在中直接更改對象或者數(shù)組的值，視圖未發(fā)生變化的解決辦法，當(dāng)時完成項(xiàng)目時，一直未找到原因，修改了好久。在進(jìn)行父子組件傳值時，用到子組件直接控制父組件中的變量值以及在vue中直接更改對象或者數(shù)組的值，視圖未發(fā)生變化的解決辦法，當(dāng)時完成項(xiàng)目時，一直未找到原因，修改了好久。 1.父子組件傳值雙向綁定在傳遞給子組件中的變量上使用.s...

宋華 2019-08-23 18:05 評論0 收藏0
vue組件封裝及父子組件傳值,事件處理

摘要：開發(fā)中把有統(tǒng)一功能的部分提取出來作為一個獨(dú)立的組件在需要使用的時候引入可以有效減少代碼冗余難點(diǎn)在于如果封裝使用如何傳參派發(fā)事件等我會采取倒敘的方式進(jìn)行說明本文總結(jié)于實(shí)戰(zhàn)解密一書代碼如下封裝組件更多要向組件輸入數(shù)據(jù)就不能用來作為數(shù)據(jù)容器 vue開發(fā)中,把有統(tǒng)一功能的部分提取出來,作為一個獨(dú)立的組件,在需要使用的時候引入,可以有效減少代碼冗余.難點(diǎn)在于如果封裝,使用,如何傳參,派發(fā)事件等,...

hikui 2019-08-23 14:39 評論0 收藏0