父子组件间的数据方法的传递

在对vue了解不深的情况下去看github的项目资源的时候总是很吃力，一个页面通常都去几个文件调取数据和方法。调取数据和方法的代码也是看的很吃力。今天去修炼了一下vue框架中父子组件的关系。

首先是父组件主动给子组件传值和方法

分两步

1.父组件调用子组件的时候调用动态属性
2.在子组件里面通过props接收

代码如下：

父组件中先引入子组件并使用子组件在父组件中定义数据和方法并在定义的子组件标签上使用其中title和msg是数据，run是方法，App=this，是将整合父组件传给子组件。

<v-home :title="title" :msg="msg" :run="run" :App="this">

</v-home>

import Home from './components/Home.vue'

components:{
  'v-home':Home,
},

在子组件中使用和data同级的props来接收父组件传来的数据和参数（注意方法也要用引号包起来）

props:['title','msg','run'],

<div>
    这是一个子组件----{{title}}----{{msg}}
</div>
<button @click="run(123)">执行方法</button>

子组件使用的时候直接引用就可以。

对于整个实例传过来的情况这需要用this去接收

this.run();
alert(this.title)

上面讲的是被动获取下面是主动获取的方法

分成父组件获取子组件，和子组件获取父组件两种

在父组件中引入使用子组件

在父组件中定义子组件的时候在子组件的标签上加上ref如

<v-home ref="home"></v-home>

然后再父组件里面就可以通过this.$refs.home.属性或方法进行调用

在父组件中引入使用子组件

是在子组件中通过this.parents.数据或方法进行调用