[TOC] ## :-: vue - 自定義組件(全局/局部) ``` <div id="app"> <!-- 自定義組件 --> <demo-name /> <e-name /> </div> <script> // 自定義組件(全局/局部) // 定義全局組件 Vue.component('eName', { template: '<div>{{msg}}</div>', data() { return { msg: 'Hello World ~' } }, }); // 定義局部組件 const oVue = new Vue({ el: '#app', data: { test: '123' }, components: { DemoName: { template: '<p>{{msg}}</p>', data() { return { msg: '--------------' } }, } } }); </script> ``` ## :-: vue - 組件數據傳遞/屬性校驗 ``` <div id="app"> <!-- 自定義組件 --> <my-content a="aaa" b="bbb" :title="title" :content="content"></my-content> </div> <script> // 組件數據傳遞/屬性校驗 const oVue = new Vue({ el: '#app', data: { title: '我是標題', content: '我是內容區域' }, components: { myContent: { // props -- 注冊屬性(傳遞數據) props: { // 屬性校驗(規定數據類型、是否必填以及默認值) content: { // 類型 type: String, // 是否必須 required: true, // 默認值 如果是引用值需要寫成函數返回的形式 ()=>[1,2,3] default: '默認內容' }, title: { // 類型 type: Number, // 是否必須 required: true, // 校驗數據 validator(value) { return value >= 10; // true/false } } }, // props: ['a', 'b', 'title', 'content'], // 簡寫 // template -- 生成模版 template: `<div> <h1>{{title}}</h1> <p>{{content}}</p> <p>--- <span>{{a}}</span> --- <span>{{b}}</span> ---</p> </div>` } } }); </script> ``` ## :-: vue - 組件數據交互(1) ``` <div id="app"> <!-- 自定義組件 --> <my-content></my-content> </div> <script> // 組件數據交互 const oVue = new Vue({ el: '#app', data: { title: '標題', content: '內容', }, comments: { // props: ['title'], // 使用 this.$parent 可以不用注冊、 // 創建后 created() { // this.$attrs -- 未注冊的屬性列表、 console.log(this.$attrs); // this.$parent -- 可以拿到實例上的數據(父組件)、 console.log(this.$parent); this.title = this.$parent.title; }, // 掛在后 mounted() { // this.$childen -- 在父組件中可以拿到子組件的數據、 console.log(this.$childen); }, // v-bind="$attrs" -- this.$attrs -- 未注冊的屬性列表、 template: `<div> <h3>{{ title }}</h3> <my-p v-bind="$attrs"></my-p> // this.$attrs 屬性及內容會顯示在行間上、 <my-p></my-p> -- // this.$parent </div>>`, // 防止 v-bind="$attrs" 時屬性顯示在行間上 inheritAttrs: false, comments: { myP: { // props: ['content'], // 使用 this.$parent 可以不用注冊、 created() { this.content = this.$parent.$parent.content; }, template: `<p>{{ content }}</p>` } } } }); </script> ``` ``` <div id="app"> <!-- 自定義組件 --> <my-content></my-content> </div> <script> // 組件數據交互 const oVue = new Vue({ el: '#app', // 提供數據 provide: { title: '標題', content: '內容', }, components: { myContent: { // 注入數據 inject: ['title'], template: `<div> <h3>{{title}}</h3> <my-p></my-p> </div>`, components: { myP: { // 注入數據 inject: ['content'], template: `<p>{{ content }}</p>` } } } } }); </script> ``` ## :-: vue - 組件數據交互(2) ``` <div id="app"> <!-- ref="myDom" -- 給dom設置引用 --> <div ref="myDom"></div> <!-- 自定義組件 --> <!-- ref="myCmp" -- 可以拿到這個組件的實例 --> <my-content ref="myCmp" :func1="func"></my-content> <!-- native -- 自定義組件不能綁定事件，需要通過修飾符修飾后才可以 --> <my-test @click.native="myClick"></my-test> <my-test @click="myClick" :test="test"></my-test> </div> <script> // 組件數據交互 const oVue = new Vue({ el: '#app', data: { test: 123 }, mounted() { // this.$refs -- 引用 console.log(this.$refs.myDom); // 返回：div 的 dom 對象、 console.log(this.$refs.myCmp); // 返回：自定義組件(myContent)的實例對象、 this.$refs.myCmp.cmpFunc(); }, methods: { func(data) { console.log(data); }, myClick(e) { console.log('myClick', e); } }, components: { myContent: { props: ['func1'], data() { return { msg: 'Hello World' } }, methods: { cmpFunc() { console.log('cmp'); }, clickFun() { this.func1(this.msg); // props:['func1'] }, }, template: `<button @click="clickFun">{{ msg }}</button>` }, myTest: { // template: '<button @click="handleClick">Yes</button>', template: '<button v-on="$listeners">Yes</button>', methods: { handleClick() { // this.$attrs -- 可以拿到行間上面的屬性數據、 console.log(this.$attrs); // this.$listeners -- 可以拿到行間上所有通過v-on綁定的方法、 console.log(this.$listeners); this.$listeners.click(); // @click="handleClick" // 主動觸發一個事件 this.$emit('click', '傳遞的數據'); }, }, } } }); </script> ``` ## :-: vue - 組件數據交互(3) ``` <div id="app"> <!-- 自定義組件 --> <my-input></my-input> <my-content></my-content> </div> <script> // event bus -- 事件總線 (子級中兄弟組件間的通訊) // 在原型鏈中擴展一個方法，用于存在數據的介質、Vue.prototype.bus = new Vue(); Vue.prototype.bus = new Vue(); const oVue = new Vue({ el: '#app', data: { test: 'abc' }, components: { // -- 自定義組件A myContent: { template: '<div>{{ content }}</div>', data() { return { content: '' } }, created() { // $on -- 監聽事件 this.bus.$on('click', val => { this.content = val; console.log('-->', val); }); }, }, // -- 自定義組件B myInput: { data() { return { inputVal: '' } }, methods: { handleClick() { // $emit -- 觸發事件 this.bus.$emit('click', this.inputVal); } }, template: `<div> <input type="text" v-model='inputVal'> <button @click="handleClick">提交</button> </div>` } } }); </script> ``` ## :-: vue - 組件·單向通信 ``` <div id="app"> <!-- 自定義組件 --> <my-count :obj="countObj"></my-count> </div> <script> function copyObj(data) { // 克隆對象、 let json = JSON.stringify(data); return JSON.parse(json); } // 組件間單向通信 Vue.component('myCount', { props: ['obj'], template: `<p>{{ myObj.a }}</p>`, data() { return { // 在組件中 this 不為 window ，所以可以直接賦值、 myObj: copyObj(this.obj), // 將全局變量賦值到局部、避免污染全局 } }, mounted() { setInterval(() => { this.myObj.a++; }, 500); }, }) const oVue = new Vue({ el: '#app', data: { countObj: { a: 10 } }, }); </script> ``` ## :-: vue - 組件·雙向通信 ``` <div id="app"> <!-- 自定義組件 --> <!-- @input="func" -- 捕獲自定義事件、(接收子組件傳過來的值) --> <my-count :count="count" @input="func"></my-count> </div> <script> // 組件間雙向通信 Vue.component('myCount', { props: ['count'], template: `<p>{{ myCount }}</p>`, data() { return { // 在組件中 this 不為 window ，所以可以直接賦值、 myCount: this.count, // 將全局變量賦值到局部、避免污染全局 } }, mounted() { setInterval(() => { // this.$emit -- 觸發自定義事件、 this.$emit('input', ++this.myCount); }, 500); }, }) const oVue = new Vue({ el: '#app', data: { count: 100 }, methods: { // @input="func" -- 捕獲自定義事件、(接收子組件傳過來的值) func(val) { this.count = val; } }, }); </script> ``` ``` <div id="app"> <!-- 自定義組件 --> <!-- 簡寫： :value + @input = v-model --> <my-count v-model="count"></my-count> </div> <script> // 組件間雙向通信 (簡寫) Vue.component('myCount', { props: ['value'], template: `<p>{{ value }}</p>`, mounted() { setInterval(() => { let value = this.value + 1; // this.$emit -- 觸發自定義事件、 this.$emit('input', value); }, 500); }, }) const oVue = new Vue({ el: '#app', data: { count: 100 } }); </script> ``` ## :-: vue - 插槽(slot) ``` <div id="app"> <my-but>插槽</my-but> </div> <script> Vue.component('myBut', { template: `<button><slot></slot></button>` }); new Vue({ el: '#app' }); </script> ``` ``` <div id="app"> <my-test> <template v-slot:top>標題</template> <!-- v-slot: 簡寫：# --> <template #bottom>正文</template> </my-test> </div> <script> new Vue({ el: '#app', components: { myTest: { template: `<div> <h1><slot name='top'></slot></h1> <h3><slot name='bottom'></slot></h3> </div>`, } } }); </script> ```