這次帶給大家在實戰案例中vue組件使用，在實戰案例vue組件使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
z專案技術：
webpack vue element axois (vue-resource) less-loader ...
#vue的操作的方法案例：
1.陣列資料尚未取得到，做出預先載入的動畫
<el-carousel :interval="3000" type="card" height="200px" class="common-mt-md"> <el-carousel-item v-for="item in movieArr" :key="item.id" class="text-center"> <img v-bind:src="item.images.small" alt="电影封面" class="ticket-index-movie-img"> </el-carousel-item>// 实际显示的内容-跑马灯 <p v-if="!movieArr.length" class="ticket-index-movie-loading"> <span class="el-icon-loading "></span> </p>// 当 movirArr的数组为空的时候，做出的预加载 loading </el-carousel>
2. 按鈕狀態的判斷，按鈕能不能點的問題
<p v-if="!multipleSelection.length"> <el-button type="success" round disabled>导出</el-button> </p><!-- 不能点， 判断数组为空 --> <p v-else> <el-button type="success" round >导出</el-button> </p><!-- 可以点， 判断数组为不为空 -->
3.像jquery 一樣，追加dom (vue 是以資料為導向的，應該擺脫jquery的dom的繁雜操作)
<el-form-item label="时间" prop="name"> <el-input v-model="ruleForm.name"></el-input>//绑定模型，检测输入的格式 <span class="el-icon-plus ticket-manage-timeinput" @click="addTime(this)"></span>//绑定方法，增加dom的操作 </el-form-item> <el-form-item label="时间" prop="name" v-for="item in timeArr" :key='item.id'> //timeArr数组与数据就渲染下面的dom，没有就不显示 <el-input v-model="ruleForm.name"></el-input> <span class="el-icon-minus ticket-manage-timeinput" @click="minusTime(this)"></span> </el-form-item>
js：
相當於jq 中的dom 字串
timeInputString: '<el-input v-model="ruleForm.name"></el-input><span class="el-icon-minus"></span>'
原生的js 往數組裡壓入和彈出資料（抓數組的長度），因為vue的是以資料驅動，以資料判斷，該不該渲染dom
addTime () {
this.timeArr.push('str')
},
minusTime () {
this.timeArr.shift('str')
}4. 追加class , 場景在循環某個列表時候，某個列表有class,綁定一個方法，可以支援穿參數
dom
<li v-for="section in item.sections" :key='section.id' @click="hideParMask" :class="getSectionId(section.id)">
<router-link :to="{ name: 'learning', params: { sectionId: section.id}, query: { courseId: courseId}}" >
<span>{{item.orderInCourse}}.{{section.sectionNumber}}</span>
<span>{{section.name}}</span>
</router-link>
</li>js
getSectionId (sectionId) {
return {
active: this.$route.params.sectionId === sectionId,
}
}5.子->父元件的通信，vue.$emit vue.on
子元件：
getSectionId (sectionId) {
return {
active: this.$route.params.sectionId === sectionId,
}
}父元件：
dom
<v-child :courseId="courseId" v-on:receiveTitle="receiveTitle"></v-child>
js
methods: {
receiveTitle (name) {
this.titleName = name; // titleName 就是 **@课程
}
}總結套路： 子元件使用函數（事件）給父元件傳遞receiveTitle 屬性，然後父元件監控這個屬性，給這個屬性綁定方法receiveTitle，方法傳參數，這個參數就是要傳遞的值
6.父-> 子
父元件：
dom:
<course-tab :courseList = courseList ></course-tab>
js：
courseList().then(res => {
this.courseList = res.data.courses;
}).catch( err => {
console.log(err)
});子元件：
props: {
courseList: {
type: Array
}
}總結套路：父元件將變數傳到子元件，需要在子元件標籤上綁定這個變量，然後子元件就可以在props 裡接受這個變數
7.錯誤路由的處理，重定向， 在router裡加入一個路由資訊
{
path: '*',
redirect: '/'
}這裡是重新定向到首頁，也可以單獨做一個404頁面，重定向到這個頁面
編程式導覽裡面，
router.push({ path: 'login-regist' }) // 如果这样写的话，会寻找路由最近的 / 然后在后面直接拼接login-regist；
为了防止在多级嵌套路由里面出现bug ,应该写全路由的全部信息，包括 /
router.push({ path: '/login-regist' })8. dom 裡拼接css
<p class="img" :style="{background: 'url(' + item.logoFileURL + ')'}"></p>9.監聽滾動事件
data () {
return {
scrolled: false，
show: true
}
},
methods: {
handleScroll () {
this.scrolled = window.scrollY > 0;
if (this.scrolled) {
this.show = false;
}
}
},
mounted () {
window.addEventListener('scroll', this.handleScroll);
}#10. 監聽輸入框輸入值的變化
@input="search"，
監聽element-UI 的<el-input 的方法，
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
################################################ ###以上是在實戰案例中vue組件使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
