把一个页面里的东西引入到另一个页面，就是父子组件了啊，有一些公共的可以提取的就封装成组件，相互之间有数据传递就是组件传值
父组件向子组件传值
第一个就是要明白怎么在父页面中向子组件中传值？你可以给子组件传入一个静态的值：
但我们一般都是需要传动态的值，所以需要
v-bind
绑定，当然，你传的值可以是数字、对象、数组等等，
动态赋一个变量的值post.author.name”>
第二个就是要知道如何在子组件中接受父页面传过来的值，有几点需要了解：
1.组件实例的作用域是孤立的。
2.组件要显式的用props选项声明它预期的数据，如：
// 某个子组件中：export default { props: { title: { type: String, default: 'hello world' } }}
子组件向父组件传值
基本概念
在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。
每个Vue实例都实现了事件接口：使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接
用v-on来监听子组件触发的事件。
举例说明
- 父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。
<template> <div class="test"> <test-com @childFn="parentFn">test-com> <br/> 子组件传来的值 : {{message}} div>template><script>export default { // ... data: { message: '' }, methods: { parentFn(payload) { this.message = payload; } }}script>
子组件是一个buttton按钮，并为其添加了一个click事件，当点击的时候使用$emit()触发事件，把message传给父组件。
<template> <div class="testCom"> <input type="text" v-model="message" /> <button @click="click">Sendbutton>div>template><script>export default { // ... data() { return { // 默认 message: '我是来自子组件的消息' } }, methods: { click() { this.$emit('childFn', this.message); } } }script>
vue同级组件间传值
1、在main.js同级目录下新建new.js文件
import Vue from 'vue'export default new Vue()
2、在组件a中传出值
先引入new.js文件，再通过$emit传值
<template> <div @click="onfocus">div>template><script> import New from '@/new.js' export default{ methods:{ onfocus:function(fromid){ New.$emit('getisshow',{ show:true }) } } }script>
3、在同级b组件中通过$on接收