javascript - vue2.0中$refs怎么使用
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-19 10:18:26
[JavaScript讨论组]

vue2.0中$refs怎么使用?求一个小例子,谢谢!

曾经蜡笔没有小新
曾经蜡笔没有小新

全部回复(2)
迷茫
<p id="parent">
  <user-profile ref="profile"></user-profile>
</p>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile
淡淡烟草味

比如我拿ueditor来做了一个Editor的组件
然后在另一个页面有个表单,里面把Editor引入进来了。当然,components里面注册时必须的!
我在页面上点击提交,那么,就会用到编辑器的getContent()方法,那么问题来了,getContent这个方法所在的对象如何界定?或者一个页面上有几个组件,都有getContent这个方法,那怎么办?
这里就给editor了一个ref属性,我理解成其实就是类似html里面的id。
然后,组件或者实例中使用$refs,就是找出所有具有ref属性的组件!然后放在一个对象中。
对象的键就是ref的属性值。

<template>
    <p>
        <Editor ref="details"></Editor>
        <Table ref="mainTable"></Table>
        <Form ></Form>
    </p>
</template>
<script>
export default (){
    data(){
        return {}
    },
    components:{Editor,Table,Form},
    methods:{
    getContent(){
            console.log(this.$refs);//这里打印的就是一系列的带有ref属性的组件构成的对象
            this.$refs.details.getContent();//这里就可以使用editor的getContent方法了
        }
    }
}
</script>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号