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.方法

页面效果：