VUE父子組件傳值

IT那活兒發布于2023-01-11 13:19 / 1616人閱讀

VUE父子組件傳值

點擊上方“IT那活兒”公眾號，關注后了解更多內容，不管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="點擊" @click="childClick" />
  div>
template>
<script>
export default {
  data() {
    return {
      data: "子組件數據",
    }; },
  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>

本文作者：池思敏(上海新炬王翦團隊）

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

云服務器 GPU云服務器 vue父子組件通訊父子組件父子組件通信父子組件通訊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/129206.html

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

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

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

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

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

摘要：我的個人博客地址資源地址非父子組件傳值，事件總線的使用方式我的博客地址如果您對我的博客內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。歡迎訪問我的個人博客：http://www.xiaolongwu.cn 前言先說一下什么是事件總線，其實就是訂閱發布者模式；比如有一個bus對象，這個對象上有兩個方法，一個是on（監聽，也就是訂閱），一個是emit（觸發，也就...

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

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

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

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

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

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

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