vue父組件和子組件數據傳遞

一、父組件向子組件傳遞數據

父組件：

<template>
  <div class="parent">
    <p>父組件：{{ msg }}</p>
    <Child message="Hello, I am parent!"></Child>
  </div>
</template>

<script>
  import Child from './Child'
  export default {
    name: 'Parent',
    data () {
      return {
        msg: 'Hello world'
      }
    }
  }
</script>

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

子組件：

<template>
  <div class="child">
    <p>子組件：{{ message }}</p>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    props: ['message'],
    data () {
      return {}
    }
  }
</script>

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

父組件向子組件傳值方式：
一、父組件引入子組件，註冊屬性message
二、子組件經過props來獲取到註冊的屬性message

頁面顯示：

二、子組件觸發事件向父組件傳遞數據

父組件：

<template>
  <div class="parent">
    <p>父組件：{{ msg }}，顯示子組件傳來的值：{{ showChildData }}</p>
    <Child message="Hello, I am parent!" @event="handler"></Child>
  </div>
</template>

<script>
  import Child from './Child'
  export default {
    name: 'Parent',
    data () {
      return {
        msg: 'Hello world',
        showChildData: ''
      }
    },
    methods: {
      handler (data) {
        console.log(data)
        this.showChildData = data
      }
    }
  }
</script>

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

子組件：

<template>
  <div class="child">
    <p>子組件：{{ message }}</p>
    <input type="button" @click="transmit" value="向父組件傳遞數據">
  </div>
</template>

<script>
  export default {
    name: 'Child',
    props: ['message'],
    data () {
      return {
        childData: 'Hello, I am child'
      }
    },
    methods: {
      transmit () {
        this.$emit('event', this.childData)
      }
    }
  }
</script>

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

子組件向父組件傳值方式：
一、父組件註冊事件event
二、子組件由transmit事件方法，經過$emit('', data)向父組件傳值

頁面點擊子組件按鈕能夠得到如下效果：

三、父組件直接調取子組件數據

父組件：

<template>
  <div class="parent">
    <p>顯示子組件傳來的值：{{ showChildData }}</p>
    <Child ref="child"></Child>
    <input type="button" @click="getChildData" value="獲取子組件的數據">
  </div>
</template>

<script>
  import Child from './Child'
  export default {
    name: 'Parent',
    data () {
      return {
        showChildData: ''
      }
    },
    methods: {
      getChildData () {
        this.showChildData = this.$refs.child.childData
      }
    }
  }
</script>

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

子組件：

<template>
  <div class="child">
    <input type="text" v-model="childData">
    <p>子組件：{{ childData }}</p>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    data () {
      return {
        childData: 'Hello, I am child'
      }
    },
    methods: {}
  }
</script>

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

父組件直接獲取子組件數據：
一、父組件引入子組件，添加ref屬性
說明：ref 被用來給DOM元素或子組件註冊引用信息。引用信息會根據父組件的 $refs 對象進行註冊。若是在普通的DOM元素上使用，引用信息就是元素; 若是用在子組件上，引用信息就是組件實例
注意：只要想要在Vue中直接操做DOM元素，就必須用ref屬性進行註冊
二、父組件直接經過 this.$refs.child.屬性 獲取數據
說明：在父組件裏面經過如下方式獲取子組件的屬性和方法
this.$refs.child.屬性
this.$refs.child.方法

頁面效果：

四、子組件直接調取父組件數據

父組件：

<template>
  <div class="parent">
    <input type="text" v-model="parentData" style="width: 500px;">
    <p>父組件：{{ parentData }}</p>
    <Child></Child>
  </div>
</template>

<script>
  import Child from './Child'
  export default {
    name: 'Parent',
    data () {
      return {
        parentData: 'Hello, I am parent!'
      }
    },
    methods: {}
  }
</script>

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

子組件：

<template>
  <div class="child">
    <p>子組件：{{ showParentData }}</p>
    <input type="button" @click="getParentData" value="獲取父組件的數據">
  </div>
</template>

<script>
  export default {
    name: 'Child',
    data () {
      return {
        showParentData: ''
      }
    },
    methods: {
      getParentData () {
        this.showParentData = this.$parent.parentData
      }
    }
  }
</script>

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

父組件直接獲取子組件數據：
一、父組件引入子組件
二、子組件直接經過 this.$parent.屬性 獲取數據
說明：在子組件裏面經過如下方式獲取子組件的屬性和方法
this.$parent.屬性
this.$parent.方法

頁面效果：