Vue2.0父子组件传值总结

一.父组件向子组件传数据

<template>
  <div>
   <child :message="msg">child>
  div>
template>

<script>
import Child from './child'
export default {
  name: 'father',
  data () {
    return {
      msg: 'this is msg'
    }
  },
  components:{
    Child
  }
}
script>

<template>
  <div>
   {{message}}
  div>
template>

<script>
export default {
    props:['message']
   
}
script>

二.子组件向父组件传数据

<template>
  <div>
    <button @click="sendMsg">确定button>
  div>
template>

<script>
export default {
  data() {
    return {
      newMsg: "msg is Changed"
    };
  },
  methods: {
    sendMsg() {
      this.$emit("msgChanged", this.newMsg);
    }
  }
};
script>

<template>
  <div>
   <child @msgChanged="showMsg">child>
  div>
template>

<script>
import Child from './child'
export default {
  name: 'father',
  components:{
    Child
  },
  methods:{
    showMsg(data){
      console.log(data)   

    }
  }
}
script>