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

1. vuethis.$xx的用法

  1. 对于data里面的属性, methods里面的方法,可以直接通过vue实例/内部this获取
  2. 但是如果自定义和data平级的属性/方法,如何获取? ==> $options
  3. 在vue项目中开发中,多数要把其他对象的实例放入vue中,如vue-router,vuex,这些属性 如何获取? $route,$store.
  4. 放入和data平级的属性获取:一般:vm.$options 特殊:vm.$route
  5. vue中的组件如何获取 vm.$children
  6. 如何获取虚拟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:'
good

{{state}}

'
} 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 r o p s . s t a t e 获取 ∗ ∗ ∗ props.state 获取 *** props.state获取props***
  • 因为在子组件的实例中,props属于data同级的属性
  • vm.$refs.sp 子组件实例
 console.log("获取父组件传递的数据:",vm.$refs.sp.$props.state);
7.=子组件实例获取标签上面的属性 $attrs==
console.log("子组件标签上面的属性",vm.$refs.sp.$attrs);

输出结果:
Vue中this.$xx的使用,如$refs,$props,$children,$el,$options_第1张图片

你可能感兴趣的:(vue,vue.js,javascript,前端)