Vue.js——组件间数据的传递（一）

页面组件的关系结构，是一个由许多组件构成的树状结构，组件间存在着两种关系：父子关系、非父子关系 。几乎任意类型的应用界面都可以抽象为一个组件树。

组件间的父子关系指的组件树中由线直接相连的两个组件间的关系，其余关系一律归为非父子关系。

一、父子组件间数据传递

1.父向子传递数据

• 父组件调用子组件时，以属性绑定的方式将要传递的数据绑定在子组件标签上。
• 在子组件对象中，使用props选项声明获取的数据，进行绑定属性的拦截，即接收来自父组件的数据 。

方式：属性绑定+数据拦截

首先，定义父组件hello和子组件world，父组件中数据变量名是msg、name、age，子组件中变量名是message、name、age。在父组件hello中调用子组件时，以“:子组件数据="父组件数据"”的方式进行属性绑定。

<template id="hello">
        <div>
            <h3>我是hello父组件</h3>  
            <h3>访问自己的数据：{
  {msg}},{
  {name}},{
  {age}}</h3> 
            <hr>
            <!-- 属性绑定方式 -->
            <my-world :message="msg" :name="name" :age="age"></my-world>
        </div>
 </template>

然后，在子组件对象中的props选项中声明获取的数据，进行属性拦截。

   components:{
        'my-hello':{
            template:'#hello',
       		data(){
                return {
                    msg:xx,
                    name:xx,
                    age:xx,
                }
            },
            components