vue $ref的基本用法

2022-01-09 01:35:37 阅读：224 来源： 互联网

标签：vue console log refs 用法组件 news ref app

1、使用在一般的标签上

<div id="app">
<input ref="count" type="text" v-model="active.name" required name="name" value="">
</div>

这样在vue中我们可以使用$ref来获取dom节点，进行一些dom的操作

下面示例：控制input输入框的文字个数

new Vue({
    el:'#app',
    data:{
        active:{'name':''}
    },
    watch:{
        active:{
           handler:function(){
                var _this = this;
                var _sum = 4; //字数限制为4个
                _this.$refs.count.setAttribute("maxlength",_sum);
           },
           deep:true
        }
    },
})

2、使用在子组件上，可以用来获取子组件的属性值,假设子组件里面都有一个属性news

<div id="app">
    <hdnews ref="hdnews"></hdnews>
    <hdinfo ref="hdinfo"></hdinfo>
</div>

new Vue({
    el:'#app',
    mounted:function () {
        console.log(this.$refs.hdnews.news);
        console.log(this.$refs.hdinfo.news);
    }
})

转： https://blog.csdn.net/ljc20090913/article/details/81662690

标签：vue,console,log,refs,用法,组件,news,ref,app
来源： https://www.cnblogs.com/fps2tao/p/15780129.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue $ref的基本用法