[TOC] ## 穿透 `/deep/` `>>>` vue引用了第三方組件，需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。此時只能通過>>>，穿透scoped。 有些Sass 之類的預處理器無法正確解析?`>>>`。可以使用?`/deep/`?操作符(?`>>>`?的別名) ## 父組件傳遞數據給自組件 `prop` 是你可以在組件上注冊的一些自定義特性。當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性 1. 子組件中添加props ``` export default { name: "server", data() { return { logo: logo, } }, props: ['packageList'] } ``` 2. 父組件中`<server :packageList="packageList"></server>`即可在子組件中使用packageList 3. 動態綁定css樣式 ~~~ .bg { height: 220px; background: url("~@/assets/img/register/register.png") center top no-repeat; } ~~~ ## 發送短信倒計時效果 html部分 ~~~ <a-button type="primary" :class="{disabled: !this.canClick}" @click="SendMessage">{{content}}</a-button> ~~~ js部分 ~~~ export default { name: "register", data() { return { formLayout: 'horizontal', form: this.$form.createForm(this), content: '獲取短信驗證碼', totalTime: 5, canClick: true } }, methods: { SendMessage() { var phone = this.form.getFieldValue('mobile'); if (!phone) { message.error('請輸入手機號'); return false; } var reg = /^1[3|4|5|7|8][0-9]{9}$/; var flag = reg.test(phone); //true if (!flag) { message.error('手機號格式不正確'); return false; } this.countDown(); }, countDown () { if (!this.canClick) { return false; } this.canClick = false; this.content = this.totalTime + 's后重新發送'; let clock = window.setInterval(() => { this.totalTime--; this.content = this.totalTime + 's后重新發送'; if (this.totalTime < 0) { window.clearInterval(clock) this.content = '重新發送驗證碼'; this.totalTime = 5; this.canClick = true } },1000) } }, }; ~~~ css樣式 ~~~ .disabled{ background-color: #ddd; border-color: #ddd; color:#57a3f3; cursor: not-allowed; // 鼠標變化 } ~~~