vue学习日记——父子组件间数据传递

在 vue 中组件实例的作用域是相互独立的，所以子组件不能直接使用父组件中的数据。子组件要想获取父组件的数据，可以采用以下两种方式：

1、子组件中使用 (this.$parent.变量名) 调用，例：

//父组件
<template>
  <div>
    <child></child>
  </div>
</template>

<script>
import child from '@/components/child'
export default {
  name: 'father',
  data () {
    return {
      fatherMsg: 'father message'
    }
  },
  components: {
    child: child
  }
}
</script>
//子组件
<template>
    <div>{{msg}}</div>
</template>

<script>
export default {
  name: 'child',
  data () {
    return {
      msg: this.$parent.fatherMsg
    }
  }
}
</script>

2、在父组件中将需要传递的数据通过属性名绑定给子组件，在子组件中用 props 接收数据，例：

//父组件
<template>
  <div>
    <child :f-msg="fatherMsg"></child>//html 不区分大小写，使用' - '代替驼峰
  </div>
</template>

<script>
import child from '@/components/child'
export default {
  name: 'father',
  data () {
    return {
      fatherMsg: 'father message'  
      //如果值是对象，上面绑定属性可以写为 v-bind='fartherMsg'
    }
  },
  components: {
    child: child
  }
}
</script>
//子组件
<template>
    <div>{{fMsg}}</div>
</template>

<script>
export default {
  name: 'child',
  props: ['fMsg']
}
</script>
//子组件采用 props 接收数据也有几种不同的方式：
//方式1：
props: ['fMsg']
//方式2 :
props: {
  fMsg: String //指定期望接收的数据类型
}
//方式3：
props: {
  fMsg:{
    type: String,   //指定传入的类型
  default: "message" //指定默认的值
  }
}

同样，父组件要获取子组件的数据也有两种方法：
1、在父组件中给子组件绑定一个 ref 属性，这样父组件中就可以通过(this.$ref.(ref值).属性名)的方式获取数据了，例：

//父组件
<template>
  <div>
    <div @click="show">message :{{msg}}</div>
    <child ref="child"></child>
  </div>
</template>
<script>
import child from '@/components/child'
export default {
  name: 'father',
  data () {
    return {
      msg: ''        //不能在这里调用数据
    }
  },
  components: {
    child: child
  },
  methods: {
    show: function () {
      this.msg = this.$refs.child.cMsg
    }
  }
}
</script>
//子组件
<template>
    <div></div>
</template>
<script>
export default {
  name: 'child',
  data () {
    return {
      cMsg: 'child message'
    }
  }
}
</script>

2、在父组件中给子组件绑定事件，在子组件中通过(this.$emit(事件名, 参数))，向父组件传递数据，例：

//父组件
<template>
  <div>
    <div>message :{{msg}}</div>
    <child @getMsg="get"></child>
  </div>
</template>
<script>
import child from '@/components/child'
export default {
  name: 'father',
  data () {
    return {
      msg: ''
    }
  },
  components: {
    child: child
  },
  methods: {
    get: function (cMsg) {
      this.msg = cMsg
    }
  }
}
</script>
//子组件
<template>
    <div @click="setMsg">setMsg</div>
</template>
<script>
export default {
  name: 'child',
  data () {
    return {
      cMsg: 'child message'
    }
  },
  methods: {
    setMsg: function () {
      this.$emit('getMsg', this.cMsg)
    }
  }
}
</script>