Vue 元件化、父子通訊
阿新 • • 發佈:2020-11-13
元件化:
任何應用都會被抽象成一種樹結構
主見使用三步驟
1.建立元件構造器 呼叫Vue.extend()建立元件構造器
2.註冊元件 呼叫Vue.component('a','b')方法註冊元件 :一個引數a-註冊元件的標籤名;另一個引數b-元件構造器名稱
3.使用元件 在Vue例項的作用範圍內使用元件
<template id="cpn"></template> Vue.component('cpn', { template:'#cpn', data() { return {}}, methods: { add(){}, app(){}} })
其中data等必須是一個函式,這樣才能保證元件之間互不影響
父子元件的通訊
父向子傳遞
props:{ //型別限制 cmovies:Array,//限制陣列型別 cmovie:[String,Number],//限制多個型別 cmessage:{ type:String,//限制字串型別的值 default:‘aaa’//預設值一般型別 //defailt:function(){//預設值為陣列或者物件必須工廠函式獲取 //return {} //} required:true//必傳值,必填字串 validator:function(){ return ['success', 'warning'].indexOf(value) !== --1//自定義驗證函式 } } }
注意:props在父級傳遞不能使用駝峰命名。此處vue版本v2.6.12
1 <div id='app'> 2 <cpn :c-info='info'></cpn> //這裡要是注意寫法,不能使用cInfo 3 </div> 4 5 <template id="cpn"> 6 <div> 7 <h3>{{ cInfo }}</h3> 8 </div> 9 </template> 10<scriptsrc="js/vue.js"></script>
11Vue.component("cpn", {
12 template: '#cpn', 13 props:{ 14 cInfo: { 15 type:Object, 16 default(){ 17 return {} 18 } 19 } 20 } 21 }) 22 const app = new Vue({ 23 el:"#app", 24 data: { 25 info: { 26 name:'Hao', 27 age: 26, 28 height: 1.80 29 } 30 } 31 })
子元件向父元件傳遞資料:自定義事件
流程;
在子元件中,通過$emit()來觸發事件。
在父元件中,通過v-on來監聽子元件的事件。
<div id="app"> <cpn @counter-click="cpnClick"></cpn> </div> <template id="cpn"> <div> <button @click="add">++</button> </div> </template> // 子元件 Vue.component("cpn", { template: '#cpn', data() { }, props:{ }, methods: { add() { //發射事件:自定義事件。後面可以新增變數 this.$emit('counter-click') } } }) //父元件 const app = new Vue({ el:"#app", methods: { cpnClick() { console.log(99) } } })
父子元件訪問方式