Vue.js 组件 script 分离 作者: Chuwen 时间: 2021-10-14 分类: Vue.js 评论 ## 需要 通常情况下，在单 `.vue` 文件开发很方便，但是当业务逻辑起来了，那么经常需要修改 `script` 和 `template` 部分，用编辑器分屏也不是那么好操作，故有了**组件 script 分离** ## 例子 ### `TableList.vue` ```vue <template> <div> <h1>测试 {{test}}</h1> </div> </template> <script> import index from './index' export default index </script> ``` ### `index.js` > 在 `TableList.vue` 同级创建个如 `index.js` 文件 ```js export default { name: "TableList", components: { 'pagination': Pagination }, data(){ return { test: 'test' } } } ```
Vue.js 在其他 js 文件调用 main.js 的 Vue 扩展方法 作者: Chuwen 时间: 2021-08-06 分类: Vue.js,JavaScript 评论 > 表述的不是很准确 `main.js` 扩展了以下方法： ```js import Vue from 'vue' import App from './App.vue' import dayjs from 'dayjs' dayjs.locale('en') dayjs.extend(require('dayjs/plugin/localizedFormat')) //看这里！ Vue.prototype.$dayjs = require('dayjs') new Vue({ render: h => h(App), }).$mount('#app') ``` 某个文件夹下的 `Request.js` 需要调用刚刚扩展的方法，需要这么做: ```js // 注意要导入这个包 import Vue from 'vue' // 这样子就可以用了 const dayjs = Vue.prototype.$dayjs console.log(dayjs()) ```
Vue.js 报错 [Vue warn]: Computed property "getSearchOther" was assigned to but it has no setter. 作者: Chuwen 时间: 2021-06-15 分类: Vue.js 评论 ```log [Vue warn]: Computed property "getSearchOther" was assigned to but it has no setter. ``` 我是这么写的： ```js //这里省略部分代码 watch:{ getSearchOther() { return this.SearchOther }, } //这里省略部分代码 ``` ## 解决方案 手动给予 `get`、`set` 方法 参照官方文档：[https://cn.vuejs.org/v2/guide/computed.html#计算属性的 setter](https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter "https://cn.vuejs.org/v2/guide/computed.html#计算属性的 setter") ```js //这里省略部分代码 watch:{ getSearchOther: { get() { return this.SearchOther }, set(newVal) { this.SearchOther = newVal; } }, } //这里省略部分代码 ```
Vue.js 监听指定 DOM 内容滚动到底部方法 作者: Chuwen 时间: 2021-05-08 分类: Vue.js 评论 ### 相关链接 - 官方文档：https://cn.vuejs.org/v2/api/#vm-refs - https://cn.vuejs.org/v2/guide/components-edge-cases.html#访问子组件实例或子元素 - 关于 ref：https://www.jianshu.com/p/3bd8a2b07d57 ### 代码如下 > 在线预览：https://b95x7.csb.app/ ```vue <template> <!--注意这里的 ref="content" content 可以任意起名字 但是注意的是第 62 行要改--> <div style="height: 200px; overflow: auto; background-color: #f36a5a" ref="content"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> <li>25</li> <li>26</li> <li>27</li> <li>28</li> <li>29</li> <li>30</li> <li>31</li> <li>32</li> <li>33</li> <li>34</li> <li>35</li> <li>36</li> <li>37</li> <li>38</li> <li>39</li> <li>40</li> </ul> </div> </template> <script> export default { name: "Test", mounted() { window.addEventListener('scroll', this.handleScroll, true) }, //销毁之后执行的事件 beforeDestroy() { window.removeEventListener("scroll", this.handleScroll, true) }, methods: { handleScroll(e) { //与第 4 行 ref 的值相对应 let dom = this.$refs.content //>>>>滚动条滚动距离 let scrollTop = e.target.scrollTop; //文档内容实际高度（包括超出视窗的溢出部分） let scrollHeight = Math.max(dom.scrollHeight, dom.scrollHeight); //窗口可视范围高度 let clientHeight = dom.innerHeight || Math.min(dom.clientHeight, dom.clientHeight); if (clientHeight + scrollTop >= scrollHeight) { console.log('到底了') } }, } } </script> <style scoped> </style> ``` ### 运行效果 - 在线预览：https://b95x7.csb.app/  