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

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

米柴

2741人浏览 · 2022-07-31 17:39:47

米柴 · 2022-07-31 17:39:47 发布

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);

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^