component -- 組件傳值父傳子 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # 父傳子 ~~~ 1.組件實例的作用域是孤立的，不能在子組件直接用父組件的數據，下面圖做了詳細解釋 2.想將父作用域的值傳入，子組件需要在子組件定義'props',用來接受父組件傳來的值。 ~~~ * 父作用域說明 ![](https://box.kancloud.cn/7ec9f131854b3f0f744ff65e9070fbc0_710x416.png) * 父子作用域說明 ![](https://box.kancloud.cn/871ae7d314809673e0726a1af8370a0d_556x508.png) >[info] ## 父傳子詳解 ~~~ 1.子組件中，默認無法訪問到父組件中的 data 上的數據和 methods 中的方法 2.組件中的所有 props 中的數據，都是通過父組件傳遞給子組件的 3.props 中的數據，都是只讀的，無法重新賦值 4.props 中的變量名不應該和子組件中data名相同 ~~~ >[danger] ##### props -- 屬性校驗 ~~~ 1.props不僅可以向下面案例中用數組的形式，也可以用對象來做校驗類型 2.官網的案例: Vue.component('my-component', { props: { // 基礎的類型檢查 (`null` 匹配任何類型) propA: Number, // 多個可能的類型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 帶有默認值的數字 propD: { type: Number, default: 100 }, // 帶有默認值的對象 propE: { type: Object, // 對象或數組默認值必須從一個工廠函數獲取 default: function () { return { message: 'hello' } } }, // 自定義驗證函數 propF: { validator: function (value) { // 這個值必須匹配下列字符串中的一個 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } } }) ~~~ >[danger] ##### 案例 ~~~ 1.下面案例就可以分析一下首先原本父組件作用域的內容是無法傳遞給子組件的，但是在子組件定義了一個'props' 用來當做傳遞的橋梁 2.我們可以吧 parent-title="title"當做賦值運算，其中parent-title相當于子組件的定義變量，title相當于接受父組件數據，給子組件的parent-title賦值 3.但是注意props 中的數據，都是只讀的，無法重新賦值 4.在組件接受時候使用v-bind，在使用的時候可以用大胡子語法，或者v-bind綁定 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app">  <my-Com2 :parent-title="title"></my-Com2> </div> <script> let myCom2 = { template:'<h4>{{parentTitle}}</h4>', props:['parentTitle'], data(){ return { // title:'測試' } } }; var vm = new Vue({ el: '#app', data:{ title:"父組件", }, components:{ // 在外部聲明變量，使用代碼簡潔 myCom2, } }); </script> </body> </html> ~~~ >[info] ## 拋棄思維定式組件也可以循環 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app">  <ul > <my-Com v-for="item in items" :item ='item'></my-Com> </ul> </div> <script> // 創建全局組件 var com = Vue.extend({ template:'<li>{{item}}</li>', props: ['item'] }); // 注冊全局組件 Vue.component('myCom',com); var vm = new Vue({ el: '#app', data(){ return{ items:['123','456'] } } }); </script> </body> </html> ~~~ >[danger] ##### $emit -- 也能父傳子 ~~~ 1.'$emit' 的返回值是當前 'this' 2.可以在不使用'prop' 父傳子，僅通過在'$emit' 增加一個回調函數，也可以實現從父組件傳值給子組件 3.下面案例如果你是一個已經使用vue 一段時間的人可以直接看，如果不是請先看完子傳父，再來看這個父傳子的內容 ~~~ * 子組件的寫法 ~~~ <template> <div> name: {{ name || "--" }} <input :value="name" @change="handleChange" /> </div> </template> <script> export default { name: "EventDemo", props: { name: String }, methods: { handleChange(e) { // 這里用了回調 const res = this.$emit("change", e.target.value, val => { // 打印結果hello console.log(val); }); // 打印結果為true console.log(res, res === this); }, } }; </script> ~~~ * 父組件寫法 ~~~ <template> <div> <Event :name="name" @change="handleEventChange" /> </div> </template> <script> import Event from "./Event"; import Proxy from "./Proxy.vue"; import Slot from "./Slot"; export default { components: { Event, SlotDemo: Slot, Proxy }, data: () => { return { name: "", }; }, methods: { // 使用回調將值傳遞給子組件 handleEventChange(val, callback) { this.name = val; callback("hello"); } } }; </script> ~~~ * 直接復制粘貼運行版本 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{parentTitle}}</h1>  <com1 @fun="appectChildern"/> </div>  <template id="com1"> <div> <h1 @click="changeTitle">{{msg}}</h1> </div> </template> <script> // 創建組件一號 const com1 = { template:'#com1', data () { return { msg:'我是組件一號' } }, methods: { changeTitle(){ this.msg = '我真的是一個組件' // 不同過Prop的父傳子寫法 this.$emit('fun',val=>{ console.log(val) }) } }, // 父傳子過來的內容 props:{ appectParent:{ type:String, default:'默認值' }, } } // 創建vue const vm = new Vue({ el:'#app', data:{ parentTitle:'我是父組件標題', }, methods: { appectChildern(params){ params(this.parentTitle) } }, // 自定義vue組件 components: { com1 } }) </script> </body> </html> ~~~ >[danger] ##### 有時候只想改變父組件傳入的值，但不影響父組件 ~~~ 1.在子組件的 data 中拷貝一份 prop，data 是可以修改的，但 prop 不能 ~~~ ~~~ export default { props: { value: String }, data () { return { currentValue: this.value } } } ~~~ >[info] ## 結論 ~~~ 1.父傳子有兩種一種是同props 直接傳遞，一種是通過事件利用this.$emit 間接觸發 ~~~ >[info] ## 一定要讀的官方Prop系列幫助很大 [https://cn.vuejs.org/v2/guide/components-props.html](https://cn.vuejs.org/v2/guide/components-props.html)