Vue学习-处理边界之访问元素 & 组件

---

前言

在绝大多数情况下，我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。不过也确实在一些情况下做这些事情是合适的。

---

一、使用 this.$root 访问根实例

即访问最上层的vue实例，如果是通过vue-cli创建的项目，则是访问的main.js中创建的实例对象。如果实在 < template> 中使用则不需要加this。

代码如下（示例）：
main.js ( 这个为根实例-----注:使用vue-cli创建 )

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  data: {
    user: '张三'
  },
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Son.vue ( 这个为子组件 )

<template>
  <div>
    <h2>Son-组件</h2>
    <button @click="getRoot">访问根实例</button>
  </div>
</template>

<script>
export default {
  methods: {
    getRoot() {
      console.log(this.$root);
    }
  }
}
</script>

展示( 图中红线位置就是根实例中的数据 )：

如果要获取到根实例上的数据则可以之间加上属性名或者方法名，例如：

<template>
  <div>
    <h2>Son-组件</h2>
    <button @click="getRoot">访问根实例</button>
  </div>
</template>

<script>
export default {
  methods: {
    getRoot() {
      console.log(this.$root.user);
    }
  }
}
</script>

二、使用 this.$parent 访问父实例

如果要访问父实例可以使用 this.$parent 访问父实例。如果实在 < template> 中使用则不需要加this。

代码如下（示例）：
Father.vue

<template>
  <div>
    <h1>Father-组件</h1>
    <hr>
    <Son></Son>
  </div>
</template>

<script>
import Son from '@/components/Son.vue'
export default {
  data () {
    return {
      fatherData: 'Father-数据'
    }
  },
  components: {
    Son
  }
}
</script>

Son.vue

<template>
  <div>
    <h2>Son-组件</h2>
    <button @click="getFather">访问父数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    getFather() {
      console.log(this.$parent.fatherData);
    }
  }
}
</script>

效果展示：

三、使用 this.$children 访问子实例

如果要访问子实例可以使用 this.$children 来进行访问，返回为一个数组。

代码如下（示例）：
Father.vue

<template>
  <div>
    <h1>Father-组件</h1>
    <button @click="getSon">访问子实例数据</button>
    <hr>
    <Son></Son>
  </div>
</template>

<script>
import Son from '@/components/Son.vue'
export default {
  components: {
    Son
  },
  methods: {
    getSon() {
      console.log(this.$children[0].sonData);
    }
  }
}
</script>

Son.vue

<template>
  <div>
    <h2>Son-组件</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      sonData: 'Son-数据'
    }
  }
}
</script>

效果展示：

四、获取DOM元素

在vue中如果要获取DOM 元素可以不使用javaScript中的方法进行获取，可以使用vue中提供的 hrf 属性进行对一个元素的标识，然后再通过 this.$refs 来获取指定的元素。

代码如下（示例）：

<template>
  <div>
    <div ref="dom">这是要被获取的DOM元素</div>
    <button @click="getDom">获取DOM元素并把字体给变为红色</button>
  </div>
</template>

<script>
export default {
  methods: {
    getDom() {
      console.log(this.$refs.dom);
      this.$refs.dom.style.color = 'red';
    }
  }
}
</script>

效果展示：