父子组件的通信(通讯) (组件的通信 是vue核心之一) 组件是vue的核心,组件的通信是vue的核心的核心
通信:数据的“动态的实时的”传递
通信(访问)--- 一定是 能 拿到 对方的 东西(数据中心的数据,方法中心的方法,计算属性等等)
父子组件访问
子访问父 parent和root
父访问子 children和refs
父组件 和 子组件 (父子之间 数据访问)
父子组件数据互相访问
vue中 $parent 以及 ref 和 $refs
子实例(子组件)
$parent获取父组件实例
在子组件直接使用this.$parent
在子实例(子组件) 拿到 父实例(父组件)里的任何东西!!!
举例:
先创建两个组件,一个为child(代表子元素),一个为parent(代表父元素),在vm实例中注册parent组件:
let child = {
template:`#child`,
}
let parent = {
template:`#parent`,
}
// 根组件
let vm = new Vue({
el:'#app',
components:{
parent
}
})
在parent组件的 components 中注册child组件,让child组件成为parent的子组件
let parent = {
template:`#parent`,
components:{
child
}
}
在视图层使用组件
<div id="app">
<parent></parent>
</div>
<template id="child">
<div>
<h1>我是子组件child</h1>
</div>
</template>
<template id="parent">
<div>
<h1>我是父组件parent</h1>
<child></child>
</div>
</template>
在子组件的created生命周期中,获取父组件东西的方法
1.子组件中,获取父组件实例的方法 this.$parent
let child = {
template:`#child`,
created(){
console.log(this.$parent);
}
}
2. 获取父组件数据中心data中的数据
let parent = {
template:`#parent`,
data(){
return {
mes:"我是父组件的数据mes",
title:"我是父组件的数据title"
}
}
}
created(){
console.log(this.$parent.mes);
console.log(this.$parent.title);
}
3.获取父组件中计算属性computed中的数据
let parent = {
template:`#parent`,
data(){
return {
mes:"我是父组件的数据mes",
title:"我是父组件的数据title",
num:1
}
},
computed:{
number(){
return this.num*100
}
},
components:{
child
}
}
created(){
console.log(this.$parent.number);
}
4.获取父组件中方法中心的方法,直接调用就加上()号
let parent = {
template:`#parent`,
methods:{
change(){
document.body.style.backgroundColor="pink"
}
}
components:{
child
}
}
created(){
this.$parent.change()
}
$root
获取根组件
$root获取根组件 即 new出来的Vue实例
获取最外层根组件(main.js内的组件)
用法和$parent一样,在其他组件上面获取到 vm实例(即根组件)
例如:
this.$root.title
例如:
<body>
<div id="app">
<parent></parent>
</div>
<template id="child">
<div>
<h1>我是子组件child</h1>
</div>
</template>
<template id="parent">
<div>
<h1>我是父组件parent</h1>
<hr>
<child></child>
</div>
</template>
<script src="./js/vue.js"></script>
<script>
// 子组件访问根组件
let child = {
template:`#child`,
// 生命周期钩子函数
created(){
// 子组件中,获取根组件实例的方法 this.$parent
console.log(this.$root);
// 获取根组件数据中心data中的数据
console.log(this.$root.mes);
console.log(this.$root.list);
console.log(this.$root.title);
// 获取根组件中计算属性computed中的数据
console.log(this.$root.num);
// 获取根组件中方法中心的方法,直接调用就加上()号
this.$root.change();
// 获取根组件的dom元素,包括他的子节点
// $el是获取根节点的dom挂载元素
console.log(this.$root.$el);
}
}
let parent = {
template:`#parent`,
data(){
return {
}
},
computed:{
num(){
return this.number*10
}
},
components:{
child
},
methods:{
change(){
document.body.style.backgroundColor = "pink";
}
}
}
let vm = new Vue({
el:'#app',
data:{
mes:"我是根组件的数据mes",
title:"我是根组件的数据title",
list:[100,200,300,400,500],
number:100
},
methods: {
change(){
document.body.style.backgroundColor = "pink";
}
},
computed:{
num(){
return this.number*10
}
},
components: {
parent
}
})
</script>
</body>
$el
$el是拿其dom
获取当前组件中的根元素dom(包括其子元素)
可以拿取到vm实例中的挂载点dom元素,所以只能拿取根节点上的
let parent = {
template:`#parent`,
created(){
console.log(this.$root.$el);
}
}
父实例(父组件)
$children ($children 的值是数组)
$children 获取"全部的"子组件
获取 当前组件的子组件,子组件会被放进数组[]里
获取子组件的下标后,操作和$parent一样
例如:
子组件的数组
this.$children
执行/获取 第一个子组件的方法/属性值
this.$children[0].方法名/data属性名
mounted(){
console.log(this.$children[0].msg)
}
<body>
<div id="app">
<parent></parent>
</div>
<!-- 父组件parent视图层 -->
<template id="parent">
<div>
<h1>我是父组件parent</h1>
<!-- 使用组件 -->
<child></child>
<mylist></mylist>
</div>
</template>
<!-- 子组件child视图层 -->
<template id="child">
<div>我是子组件child</div>
</template>
<!-- 子组件mylist视图层 -->
<template id="mylist">
<div>我是子组件mylist</div>
</template>
<script src="./js/vue.js"></script>
<script>
let child = {
template:`#child`,
data(){
return {
title:'我是子组件child的title'
}
}
}
let mylist = {
template:`#mylist`,
data(){
return {
title:'我是子组件mylist的title'
}
}
}
let parent = {
template:`#parent`,
components:{
// 注册组件,让他俩成为parent的子组件
child,
mylist
}
}
let vm = new Vue({
el:'#app',
// 注册parent组件
components:{
parent
}
})
</script>
在父组件的 mounted 生命周期函数中获取 子组件:
mounted(){
console.log(this.$children);
}
得到的结果是一个数组,因为有两个子组件
访问其中一个子组件的data中的数据,通过下标
mounted(){
console.log(this.$children[0].title);
console.log(this.$children[1].title);
}
同理的,访问计算属性和方法中心都是通过下标去访问其中一个