Vue组件的边界情况

01.$root;

访问组件的根实例;用的不多,基本上在vuex上进行数据操作;

02.parent/children;

可以获得父组件或者子组件上边的数据;一般不建议使用$parent,因为如果获取这个值进行修改的话,也会更改父组件上边的数据;

javascript 复制代码
<template>
    <div>
        //相当于使用了爷组件上边title属性的值
        {$parent.$parent.title}
        <button @click="$parent.$parent.handle">
            调用爷组件上边的方法
        </button>
    </div>
</template>

03.$refs;

这个也可以获取到子组件上边的数据;在el组件中我们可以通过这个来进行验证数据;

复制代码
this.$refs[formname].validate((valid)=>{
    if(valid){

        console.log('success');

    }else{
        
        console.log('fail')
        return false;
    }

})
javascript 复制代码
//这是子组件
<tempalte>
<div>
    <input v-model="input" type="text" ref="txt">
</div>

</template>

export default{

    data(){

        return{

        input:''
}

},

    methods:{

        fucus(){
        this.$refs.txt.focus()

}

}


}
javascript 复制代码
<template>

    <div>
        <niu ref="hao"/>

        <button @click="huo">获取焦点</button>
    </div>
</template>

import niu from './niu.vue'

export default{

components:{
    niu
},
methods:{

    huo(){

        this.$refs.hao.focus();
        this.$refs.hap.value = '牛啊牛'

    }

}



}

04.provide、inject

嵌套比较多的情况下子组件使用这个好用

javascript 复制代码
//父组件


export default{

    provide:{

        return:{
            title:this.title,
            message:this.message
        }

    },

    methods:{
        message(){
           return this.title
        }
    }

}
javascript 复制代码
//子组件  获得title变量以及message的方法

export default{

    inject:['title','message']


}

05.$attrs

把父组件中非props属性绑定到内部组件(不包含style,class属性)

复制代码
//子组件


<template>
    <div>

        <input  v-bind="$attrs">

    </div>


</template>

export default{


    inheritAttrs:false

}

06.$listeners

把组件中DOM对象的原生事件绑定到内部组件

相关推荐
勇往直前plus8 分钟前
Vue3(篇一) 核心概念——响应式模板语法与组件基础
前端·javascript·vue.js
咩咩啃树皮18 分钟前
第43篇:Vue3计算属性(computed)完全精讲——缓存机制、依赖计算、业务最优解
前端·vue.js·缓存
用户938515635071 小时前
从零搭建 AI 日记助手:用 Milvus 向量数据库 + RAG 让机器读懂你的每一天
javascript·人工智能·全栈
徐小夕2 小时前
花了一周,3亿tokens,我开源了一款 Word 文档智能审查平台,文稿自动质检+可视化分析,告别低效人工审核
前端·算法·github
a1117763 小时前
坦克大战3D Three.js 3D (开源项目)
开发语言·javascript·3d
kyriewen4 小时前
别再乱用useEffect了——你写的10个里有8个不该存在
前端·javascript·react.js
Ivanqhz4 小时前
Rust &‘static str浅析
java·前端·javascript·rust
IT_陈寒4 小时前
SpringBoot这个分页坑,我踩了三天才爬出来
前端·人工智能·后端
颜酱4 小时前
05 | 召回前置准备:根据业务数据库生成各数据库(读取配置阶段)
前端·人工智能·后端
zandy10115 小时前
衡石 Agentic BI的ReAct 推理框架在 Agentic BI 中的工程化实践
前端·javascript·react.js