1. <div id="app">
  2. <navbar></navbar>
  3. <pagefooter></pagefooter>
  4. </div>
  1. Vue.component('navbar',{
  2. template:'#navbar',
  3. data:function () {
  4. return {
  5. navs:[]
  6. }
  7. }
  8. });
  9.  
  10. Vue.component('pagefooter',{
  11. template:'#pagefooter',
  12. data:function () {
  13. return {
  14. footer:''
  15. }
  16. }
  17. });
  18. new Vue({
  19. el:'#app',
  20. mounted:function () {
  21. //ready,
  22. //这里怎么直接访问navbar的navs和pagefooter的footer值呢,
  23. }
  24. })

这就用到ref了
修改组件

  1. <div id="app">
  2. <navbar ref="navbar"></navbar>
  3. <pagefooter ref="pagefooter"></pagefooter>
  4. </div>
  1. new Vue({
  2. el:'#app',
  3. mounted:function () {
  4. //ready,
  5. //这里怎么直接访问navbar的navs和pagefooter的footer值呢,
  6. console.log(this.$refs.navbar.navs);
  7. console.log(this.$refs.pagefooter.footer);
  8. }
  9. })

如果仅仅用到一个普通标签上

  1. <div ref="demo"></div>

他的作用和:

  1. document.querySelector('[ref=demo]');

的作用一样

官方文档:

尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。例如:

  1. <div id="parent">
  2. <user-profile ref="profile"></user-profile>
  3. </div>
  1. var parent = new Vue({ el: '#parent' })
  2. // 访问子组件实例
  3. var child = parent.$refs.profile

当 ref 和 v-for 一起使用时,获取到的引用会是一个数组,包含和循环数据源对应的子组件。

$refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs。

来源:https://segmentfault.com/a/1190000009052002

作者 铁血 汉子 2017年11月8日
2025/06/13/06:41:31pm 2017/11/8/10:03:43
0 3124