[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>
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request