Vue--$ref, $parent, $children--使用/教程/实例

原文网址:Vue--$ref, $parent, $children--使用/教程/实例_IT利刃出鞘的博客-CSDN博客

简介

说明

本文用示例介绍Vue中$ref, $parent, $children的用法。

使用场景

  • $refs:父组件访问子组件
    • 如果在普通的DOM元素上使用,引用指向的是DOM元素;
    • 如果用在子组件上,引用的是组件实例
  • $parent:子组件访问父组件
  • $children:父组件访问子组件

官网

处理边界情况 — Vue.js

API — Vue.js

示例:$refs

代码

Parent.vue(父组件)

<template>
  <div class="outer">
    <h3>父组件</h3>
    <div ref="ref-div">div节点</div>
    <button @click="getThisDiv">获得本组件的div的innerText:{{ myDiv }}</button>

    <child ref="ref-child"></child>
    <button @click="getChildName">获得子组件的name:{{ name }}</button>
    <button @click="getChildAge">获得子组件的age:{{ age }}</button>
  </div>
</template>

<script>

import Child from "./Child";
export default {
  name: 'Parent',
  components: {Child},
  data() {
    return {
      myDiv: '',
      name: '',
      age: 0
    };
  },
  methods: {
    // 读本组件的div节点
    getThisDiv: function () {
      this.myDiv = this.$refs["ref-div"].innerText;
    },

    // 读子组件节点
    getChildName: function () {
      this.name = this.$refs["ref-child"].name;
    },
    getChildAge: function () {
      this.age = this.$refs["ref-child"].age;
    }
  }
}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid red;
  padding: 20px;
}
</style>

Child.vue(子组件)

<template>
  <div class="outer">
    <h3>子组件</h3>
    <div>name:{{ name }}</div>
    <div>age:{{ age }}</div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      name: "Tony",
      age: 20
    }
  }
}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

路由(store/index.js)

import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/parent',
      name: 'Parent',
      component: Parent,
    }
  ],
})

测试

访问:http://localhost:8080/#/parent

Vue--$ref, $parent, $children--使用/教程/实例

示例:$children

代码

Parent.vue(父组件)

<template>
  <div class="outer">
    <h3>父组件</h3>

    <child-a></child-a>
    <child-b></child-b>

    <button @click="getChildren">获得子节点</button>
  </div>
</template>

<script>

import ChildA from "./ChildA";
import ChildB from "./ChildB";
export default {
  name: 'Parent',
  components: {ChildB, ChildA},
  methods: {
    getChildren: function () {
      console.log(this.$children);
      console.log("第1个子组件的name:" + this.$children[0].name);
      console.log("第2个子组件的name:" + this.$children[1].name);
    },
  }
}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid red;
  padding: 20px;
}
</style>

ChildA(子组件)

<template>
  <div class="outer">
    <h3>子组件</h3>
    <div>name:{{ name }}</div>
    <div>age:{{ age }}</div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      name: "Tony",
      age: 20
    }
  }
}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

ChildB(子组件)

<template>
  <div class="outer">
    <h3>子组件</h3>
    <div>name:{{ name }}</div>
    <div>age:{{ age }}</div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      name: "Tony2",
      age: 21
    }
  }
}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

路由(store/index.js)

import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/parent',
      name: 'Parent',
      component: Parent,
    }
  ],
})

测试

访问:http://localhost:8080/#/parent

Vue--$ref, $parent, $children--使用/教程/实例

示例:$parent

代码

Parent.vue(父组件)

<template>
  <div class="outer">
    <h3>父组件</h3>
    <div>name:{{ name }}</div>
    <div>age:{{ age }}</div>
    <child></child>
  </div>
</template>

<script>

import Child from "./Child";
export default {
  name: 'Parent',
  components: {Child},
  data() {
    return {
      name: "Tony",
      age: 20
    }
  }
}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid red;
  padding: 20px;
}
</style>

Child.vue(子组件)

<template>
  <div class="outer">
    <h3>子组件</h3>
    <button @click="getParent">获得父节点</button>
  </div>
</template>

<script>

export default {
  methods: {
    getParent: function () {
      console.log(this.$parent);
      console.log("父组件的name:" + this.$parent.name);
    },
  }
}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

 路由(store/index.js)

import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/parent',
      name: 'Parent',
      component: Parent,
    }
  ],
})

测试

访问:http://localhost:8080/#/parent

点击“获得父节点”按钮后,控制台即输出父节点数据。

Vue--$ref, $parent, $children--使用/教程/实例

上一篇:Grid布局


下一篇:html+css基础02