vue组件开发规范
<p><code>遵照ydui的组件结构</code> <a href="https://github.com/ydcss/vue-ydui/tree/master/src/components" title="ydui">ydui</a></p>
<h3>组件文件结构</h3>
<pre><code>/src/components/COMPNAME/
/src/components/COMPNAME/index.js
/src/components/COMPNAME/src/COMPNAME.vue
/src/components/COMPNAME/src/OTHENAME.vue
/src/components/styles/COMPNAME.less[css]</code></pre>
<pre><code class="language-html">
<style lang="less">
@import '../styles/COMPNAME.less';
</style>
<template>
<div :right="right">
{{ msg }}
</div>
</template>
<script type="text/babel">
// import {OTHENAME} from './OTHENAME';
export default {
name: 'COMPNAME',
components: {},
// 组件内部属性
data() {
return {
msg: 'hello'
}
},
// 接收来自父组件的属性
props: {
right: {
type: String,
default: '5%'
},
}，
// 计算属性 会缓存 多个值影响一个值
// 默认只读，可通过声明setter，getter实现可读可写
computed:{
},
// 侦听器 不缓存，一个值影响多个值，可以侦听 data、props、computed、$emit
watch：{
},
methods: {
someMethod() {
},
},
//...其他钩子函数
}
</script>
</code></pre>