這次帶給大家vue自訂元件，vue自訂元件的注意事項有哪些，以下就是實戰案例，一起來看一下。
寫一個vue元件
我下面寫的是以.vue結尾的單一檔案元件的寫法，是基於webpack建構的項目。如果還不知道怎麼用webpack建構一個vue的工程的，可以移步到vue-cli。
一個完整的vue元件會包含一下三個部分：
template：範本
Vue.component('simple-counter', {
template: '<p id="inputBox"><input type="text"></p>',
data () { // 数据
return {
counter: 0
}
},
methods: {
// 写点方法
},
created () {
// 生命钩子
},
computed: {
// 计算属性
}
})<template> <p id="inputBox"> <input type="text"> </p> </template> <!-- template就是这个组件的html，也就是下面部分（vue-loader会将template标签下的内容解析出来）： --> <p id="inputBox"> <input type="text"> </p> <!-- 对应原生写法的话，就是template内的dom字符串 -->
export default {
data () {
return {
counter: 0
}
},
methods: {
// 方法
},
created () {
// 生命钩子
},
computed: {
// 计算属性
}
}
// 在这里很明显js部分就是对应的原生写法内的非template部分了。
// export default这个是es6的模块写法，不懂的可以先去了解es6的模块化<style lang="scss" scoped> ...样式 </style>
引入
要怎麼在其它元件引用該元件？元件一（button.vue）
<template>
<p class="button">
<button @click="onClick">{{text}}</button>
</p>
</template>
<script>
export default {
props: ['text'], // 获取父组件的传值
data () {
return {
}
},
methods: {
onClick () {
console.log('点击了子组件')
}
}
}
</script>
<style lang="scss" scoped>
.button {
button {
width: 100px;
}
}
</style>#元件二（box.vue）
<template>
<p class="box">
<v-button :text="text"></v-button> <!--使用组件并传值（text）-->
</p>
</template>
<script>
import Button from './button.vue' // 引入子组件
export default {
components: {
'v-button': Button
},
data () {
return {
text: '按键的name'
}
},
methods: {
}
}
</script>以上是vue自訂元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
