父组件向子组件传递数据及子组件调动父组件自定义事件

在vue中，我们基于组件进行开发，一个复杂的页面，我们一般会放到多个component中，多个component之间就会涉及到数据交互的问题。

父组件传递数据到子组件

从父组件传递数据到子组件还是比较简单的，通过属性传递过去即可。

父组件设置

:子组件的属性=‘需要传递的数据’

子组件接收数据

props: ['属性名']

没什么特别的地方，只是需要说明的事，因为通过属性传递过去的，所以在子组件中，不能直接修改传递的数据，如果需要修改需要，需要将属性值传递到data中，通过data进行修改。

子组件触发父组件方法

子组件触发父组件的方法，与值传递类似。只是传递的不再是数据，而是一个方法。

父组件设置

@子组件需要触发的方法=父组件的方法(参数)

子组件设置

子组件通过this.$emit(‘子组件需要触发的方法’,参数)即可调用父组件的方法，同时可以传递数据。

demo演示

<template>
  <div>
    <p>
      这是父组件
    </p>
    <el-input v-model="fromChild" placeholder="我是从子组件获取的值" />
    <el-input v-model="toChild" placeholder="传递给子组件的值"></el-input>
    <child :toChild="toChild" @fromC="fromChildMethod($event)"></child>
  </div>
</template>
<script>
import child from './child'

export default {
  name: 'parent',
  components: {child},
  data () {
    return {
      toChild: '',
      fromChild: ''
    }
  },
  methods: {
    fromChildMethod: function (val) {
      debugger
      this.fromChild = val
    }
  }
}
</script>

<template>
  <div>
    <p>
      这是子组件
    </p>
    <el-input v-model="this.toChild" placeholder="我是从子组件获取的值"/>
    <el-input v-model="toParent"></el-input>
    <el-button type="primary" @click="toParentC">返给父组件</el-button>
  </div>
</template>
<script>
export default {
  name: 'child',
  props: ['toChild'],
  data () {
    return {
      toParent: ''
    }
  },
  methods: {
    toParentC: function () {
      this.$emit('fromC', this.toParent)
    }
  }
}
</script>