23、$refs是什么东东?
通过在标签上设置ref属性,然后在vue实例方法中可以通过$refs拿到这些标签,如:
<input ref="input">
methods: { focus: function () { //拿到文本框标签,调用其获取焦点方法 this.$refs.input.focus() } }
24、对于多级嵌套组件,后代组件如何拿到父级或祖父级,设置更高级别的组件的数据或方法?
使用依赖注入。
provide: function () { return { getmap: this.getmap } }
然后在任何后代组件里,我们都可以使用inject 选项来接收指定的我们想要添加在这个实例上的属性:
inject: ['getmap']
先看一个示例:
mounted: function () { //pikaday是一个第三方日期选择器的库。这里是将这个日期选择器附加到一个输入框上,最后挂载到dom上 var picker = new pikaday({ field: this.$refs.input, format: 'yyyy-mm-dd' }) //设置一次性的侦听事件,在组件销毁之前,销毁这个日期选择器 this.$once('hook:beforedestroy', function () { picker.destroy() }) }
mounted: function () { this.attachdatepicker('startdateinput') this.attachdatepicker('enddateinput') }, methods: { attachdatepicker: function (refname) { var picker = new pikaday({ field: this.$refs[refname], format: 'yyyy-mm-dd' }) this.$once('hook:beforedestroy', function () { picker.destroy() }) } }
26、如果组件之间出现了互相引用,如何处理?
先看一个示例:
组件<tree-foler>的模板是这样的:
<p> <span>{{ folder.name }}</span> <tree-folder-contents :children="folder.children"/> </p>
另外一个组件<tree-folder-contents>的模板是这样的:
<ul> <li v-for="child in children"> <tree-folder v-if="child.children" :folder="child"/> <span v-else>{{ child.name }}</span> </li> </ul>
这两个组件互相引用,导致出现了循环引用。这种情况如何去解决呢?
假设这两个组件<tree-folder>是父组件,<tree-folder-contents>是子组件,则产生问题的是子组件<tree-folder-contents>, 因此我们在生命周期钩子beforecreate里面去注册子组件
beforecreate: function () { this.$options.components.treefoldercontents = require('./tree-folder-contents.vue').default }
components: { treefoldercontents: () => import('./tree-folder-contents.vue') }
这样问题就解决了。
如对本文有疑问, 点击进行留言回复!!
asp.net中ajax和一般处理程序(handler.ashx)的交互
egg.js创建项目,目录介绍,简单使用,sequelize mysql使用
网友评论