Vue中父子组件传值应用

子组件

<template>
  <div>
    <h1>子组件</h1>
    <p>下面是父组件传过来的数据</p>
    <p>第一个数据：{{fData}}</p>
    <p>第二个数据：{{fMessage}}</p>
    <Button type="primary" @click="sonClick">触发父组件方法</Button>
  </div>
</template>
 
<script>
export default {
  props: ['fData', 'fMessage'],
  data () {
    return {
      sonMessage: '子组件数据sonMessage',
      sonData: '子组件数据sonData'
    };
  },
  methods: {
    sonClick () {
      this.$emit('show', this.sonMessage, this.sonData);
    }
  }
}
</script> 

<style lang="scss" scoped>
.child{
  background-color: aqua;
}
</style>

父组件

<template>
  <div>
    <h1>父组件</h1>
    <Button type="primary" @click="getData">获取数据</Button>
    <p>子组件数据1----{{fromSon1}}</p>
    <p>子组件数据2----{{fromSon2}}</p>
    <child v-bind:fData="data1" :fMessage="data2" @show="showFather"></child>
  </div>
</template>
 
<script>
//引入子组件
import child from './subcoms/subtwo.vue'
export default {
  data () {
    return {
      data1: '父组件数据data1',
      data2: '父组件数据data2',
      fromSon1: '',
      fromSon2: ''
    };
  },
  methods: {
    showFather (a, b) {
      this.fromSon1 = a;
      this.fromSon2 = b;
      console.log('触发了父组件的方法' + '======' + a + '======' + b);
    },
    getData () {
      console.log(this.fromSon1);
      console.log(this.fromSon2);
    }
  },
  components:{
    child
  }
}
</script> 
</script>

<style lang="scss" scoped>

</style>

运行结果

总结

引入子组件

1. 引入子组件import child from './subcoms/subtwo.vue'
2. 注册组件 components:{ child }
3. vue解析之后就会把已注册的组件在template模板的内容中以<child></child>展示出来

父组件向子组件传值

1. 父组件在引用子组件时，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据（data1和data2），传递到子组件内部，供子组件使用
   v-bind:fData="data1" :fMessage="data2"
2. 把父组件传递过来的数据， 在 props数组接收 props: ['fData', 'fMessage'],
3. 子组件中使用props数组 中定义好的数据 {{fData}} {{fMessage}}

子组件给父组件传值

1. 父组件向子组件传递方法，使用事件绑定机制 v-on，自定义一个事件属性，传递给子组件@show="showFather"
2. 在子组件中定义一个sonClick方法；@click="sonClick"
3. 调用定义的sonClick方法，就可以触发父组件传递过来的方法了
4. 在方法中，利用 $emit 触发 父组件传递过来的，挂载在当前实例上的事件，还可以传递参数
   sonClick () { this.$emit('show', this.sonMessage, this.sonData); }