Vue中this.$xx的使用,如$refs,$props,$children,$el,$options

最新推荐文章于 2024-05-09 10:29:14 发布

米柴

最新推荐文章于 2024-05-09 10:29:14 发布

阅读量2.5k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48917089/article/details/126088266

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. `vue`中`this.$xx`的用法

对于data里面的属性, methods里面的方法,可以直接通过vue实例/内部this获取
但是如果自定义和data平级的属性/方法，如何获取? ==> $options
在vue项目中开发中,多数要把其他对象的实例放入vue中，如vue-router,vuex,这些属性如何获取？ $route,$store.
放入和data平级的属性获取：一般：vm.$options 特殊：vm.$route …
vue中的组件如何获取 vm.$children
如何获取虚拟dom vm.$refs.refName

一个对象的实例中,通过this.$xxx的方法,无论是vue``,vuecomponet…都是差不多的

2. 案例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中this.$xx的使用</title>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>this.$xxx的使用</title>
    </head>

    <body>
        <div id="app">
            <!-- 向子组件传递静态数据-->
            <zj state="天气很好" ref="sp" id="test"></zj>
        </div>
        <script src="js/vue.js"></script>
        <script>
            //全局声明组件
            let zj={props:['state'],template:'<div>good <p>{{state}}</p></div>'}
            Vue.component("zj",zj);
            var vm = new Vue({
                el: '#app',
                //自定义属性
                myData: {
                    username: 'jakc'
                },
            });
            //=========迁移到详细说明输出=======
            // ----------->  迁移点
            console.log()

        </script>
    </body>

    </html>
</body>

</html>

迁移点<---------------------

1. 获取el属性 $el=====

console.log("获取el：",vm.$el);

2. 获取自定义属性 myData $options=

  console.log("获取自定义属性:",vm.$options.myData);

3. =获取vm的直接子组件 $children=

子组件：当前页面，单独定义的，以组件标签名引入

 console.log("获取页面子组件:",vm.$children[0]);

4. 在vue项目开发中，获取当前组件树的顶级组件vue实例。 $root

如果没有父实例，获取就是实例本身

console.log("顶级组件实例:",vm.$root);

5. ==获取虚拟dom,如果是组件，则为实例=

 console.log("获取子组件:",vm.$refs.sp);

6.==== 父组件向子组件传递数据子组件里面可以直接在获取{{ state }}获取=====

也可以通过子组件实例 zj. $p ro p s . s t a t e 获取 * * *$ props***
因为在子组件的实例中,props属于data同级的属性
vm.$refs.sp 子组件实例

 console.log("获取父组件传递的数据:",vm.$refs.sp.$props.state);

7.=子组件实例获取标签上面的属性 $attrs==

console.log("子组件标签上面的属性",vm.$refs.sp.$attrs);

输出结果：
在这里插入图片描述

米柴

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
Vue中this.$xx的使用,如$refs,$props,$children,$el,$options

vue中获取data平级的其他属性和方法,vue中this.$xxx的用法
复制链接

扫一扫

专栏目录