父子組件傳值

首先說一下父子組件的定義，因為以前不傻傻分不清患民，走了很多彎路缩举，A組件調(diào)用了B組件，A組件就是B的父組件匹颤，B組件是A的子組件仅孩。

父組件給子組件傳值

父組件在調(diào)用子組件的地方采用V-bind綁定值，子組件中采用Props進行接收

具體上代碼如下：

//父組件
<template>
   <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <p>我是父組件印蓖，我給子組件傳消息</p>
        <child v-bind:msg="msg" @toparent='getMag'></child>
        <p>子組件傳給我的值是：{{ msg2 }}</p></div>
</template>
<script>
  import child from '@/components/child'

  export default {
  name: 'App',
  components: {
      //HelloWorld
      child
  },
  data: function () {
      return {
          msg: '我是父組件辽慕，我給你發(fā)消息',
          msg2: ''
      }
  },
  methods: {
      getMag(msg) {
          this.msg2 = msg
      }
  }

}
</script>

···

子組件
<template>
   <div class="child">
    <p>我是一個子組件</p>
    <p>我接收到的父組件的消息是：{{msg}}</p>
    <button @click="toparent">給父組件發(fā)消息</button>
    <p>我要發(fā)送給父組件的值是：{{ toParent }}</p>
   </div>
</template>

<script>
  export default {
    name: 'child',
    props: ['msg'],
    data() {
        return {
            toParent: 'hi,我是子組件'
        }
    },
    methods: {
        toparent() {
            this.$emit('toparent', this.toParent)
        }
    }

}
</script>

<style lang="" scoped>
</style>

子組件給父組件傳值

自組件采用$emit給父組件傳值，具體見下圖：

//父組件
<template>
   <div id="app">
        //父組件此處綁定的方法名（toparent）必須與子組件中mehods中$emit所在方法名相同赦肃，
        <child @toparent='getMag'></child>
      //父組件中定義好接收值的data溅蛉，并在綁定的方法（getMag（value）value為傳過來的值）中接收值
        <p>子組件傳給我的值是：{{ msg2 }}</p></div>
</template>
<script>
  import child from '@/components/child'

  export default {
  name: 'App',
  components: {
      child
  },
  data: function () {
      return {
          msg2: ''
      }
  },
  methods: {
      getMag(msg) {
          this.msg2 = msg
      }
  }

}
</script>

子組件

子組件
<template>
   <div class="child">
    <p>我是一個子組件</p>
    <button @click="toparent">給父組件發(fā)消息</button>
    <p>我要發(fā)送給父組件的值是：{{ toParent }}</p>
   </div>
</template>

<script>
  export default {
    name: 'child',
    props: ['msg'],
    data() {
        return {
            toParent: 'hi,我是子組件'
        }
    },
    methods: {
//父組件調(diào)用時綁定的方法名稱應(yīng)該與此處的方法名一樣
        toparent() {
            this.$emit('toparent', this.toParent)
        }
    }

}
</script>

<style lang="" scoped>
</style>

···

image.png

小白一枚公浪，只為記錄，若有侵權(quán)請聯(lián)系船侧。