标签：Vue name parent -- age 组件 import 20px Parent
原文网址：Vue--$ref, $parent, $children--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
简介
说明
本文用示例介绍Vue中$ref, $parent, $children的用法。
使用场景
- $refs：父组件访问子组件
- 如果在普通的DOM元素上使用，引用指向的是DOM元素；
- 如果用在子组件上，引用的是组件实例
- $parent：子组件访问父组件
- $children：父组件访问子组件
官网
示例：$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
示例：$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
示例：$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,name,parent,--,age,组件,import,20px,Parent 来源： https://blog.csdn.net/feiying0canglang/article/details/122390416
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。