vue2.0父子组件传值

• 父组件向子组件传值
  父组件通过属性绑定，子组件通过props来接收数据进行传值

子组件设置props：

子组件代码如下：

<template>
    <div>
        <h2>子组件</h2>
        <p>{{message}}</p>
    </div>
</template>
<script>
export default {
    props:["message"]
}
</script>

父组件先引入子组件，而后进行属性绑定

父组件代码如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <child :message="msg"></child>
  </div>
</template>

<script>
import child from "./child"
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
    child
  }
}
</script>

• 子组件向父组件传值
  子组件主要通过事件传递数据给父组件

子组件通过事件，使用$emit传递

子组件代码如下：

<template>
    <div>
        <h2>子组件</h2>
        <p>{{message}}</p>
        <label>
            <span>用户名：</span>
            <input type="text" v-model="username" @change="set_username">
        </label>
    </div>
</template>
<script>
export default {
    data(){
        return {
            username:'',
        }
    },
    methods:{
        set_username(){
            this.$emit('trans_user',this.username)
        }
    },
    props:["message"]
}
</script>

父组件部分：
声明了一个方法 get_username，用 trans_user事件调用 get_username方法，获取到从子组件传递过来的参数 username

父组件代码如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <child :message="msg" @trans_user="get_username"></child>
    <div>
      用户名为：{{user}}
    </div>
  </div>
</template>
<script>
import child from "./child"
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      user:''
    }
  },
  methods:{
    get_username(info){
      this.user = info;
    }
  },
  components:{
    child
  }
}
</script>

get_username方法中的参数 info就是从子组件传递过来的参数 username

目录：
事例的组件目录，引入子组件时注意路径正确