把一個頁面裡的東西引入到另一個頁面，就是父子元件了啊，有一些公共的可以提取的就封裝成元件，互相之間有資料傳遞就是元件傳值
父元件向子元件傳值
第一個就是要明白怎麼在父頁面中向子元件中傳值？你可以給子元件傳入一個靜态的值：
但我們一般都是需要傳動态的值，是以需要
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接收