一 父获取子组件实例对象 （ref）
1.父组件;
<template>
<div class="">
<h1 ref="h1">天王盖地虎</h1>
<son ref="son" />
</div>
</template>
<script>
// 导入son组件
import son from "@/components/son.vue";
export default {
name: "",
methods: {},
mounted() {
console.log(this.$refs.h1);
console.log(this.$refs.son);
},
components: {
son,
},2.打印的结果是:
? 可以看出打印的结果里面有子组件的变量和方法，那么就可以? ?在父组件里面访问子组件的变量和方法。
3.访问的结果是：
console.log(this.$refs.son.fn());
console.log(this.$refs.son.name);
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ?
4.子组件: (定义了变量和方法)
export default {
data() {
return {
name: "爱德华",
};
},
name: "",
methods: {
fn(){
console.log('今晚吃饭');
}
},总结:在标签上添加ref,获取到的值是该标签，在组件上添加ref，可以获取到组件上的变量和方法，
并且能够访问到。? ?
二. 子获取父组件实例对象 （this.$parent ）
1.代码演示:
父组件:
<template>
<div class="">
<span>
<son ref="son" />
</span>
</div>
</template>
<script>
// 导入son组件
import son from "@/components/son.vue";
export default {
data() {
return {
name: "lose",
};
},子组件:
mounted() {
console.log(this.$parent);
},2.打印的结果:
3.遵循的定律:
? ? ? ? ? ? ? ?1.子组件标签如果是其它组件包着的就是其它组件是它的父级
? ? ? ? ? ? ? ?2.如果子组件标签是原生标签包着的，它的父组件就是它所在的组件
?4.代码验证:??
? ? （1?) :被原生标签包着;
<span>
<son ref="son" />
</span>??
?解析:依然也可以访问到父组件的name。
? ? （2) 被其它组件包着
<template>
<div class="">
<abc>
<son ref="son" />
<abc/>
</div>
</template>
<script>
// 导入son组件
import son from "@/components/son.vue";
// 导入abc组件
import abc from "@/components/abc.vue";解析:没有获取到父组件的name
三. Vus.Use实现全局注册
(1)为了于Vue.use形参对比先回顾以下局部注册
? ? ? ? ? ? ?1.引入
? ? ? ? ? ? ?2.注册
? ? ? ? ? ? ?3.使用?
APP.vue:
<template>
<div class="">
<buttonQ />
<inputQ />
</div>
</template>
<script>
// 1.导入组件
import buttonQ from "@/components/buttonQ.vue";
import inputQ from "@/components/inputQ.vue";
export default {
name: "",
methods: {},
components: {
buttonQ,
inputQ,
},
};
</script>?buttonQ.vue:
<template>
<div class="">
<button>我是按钮</button>
</div>
</template>
<script>
export default {
name: "buttonQ",
};??inputQ.vue:
<template>
<div class="">
<input type="text">
</div>
</template>
<script>
export default {
name: 'inputQ',
methods: {
}
}
</script>(2): 使用Vue.use()进行注册
?在APP.vue文件里：
<template>
<div class="">
<buttonQ />
<inputQ />
</div>
</template>解析:可以直接进行使用, 不用和上方的一样先导入在进行注册
? 在index.JS文件里：
import buttonQ from "@/components/buttonQ.vue";
import inputQ from "@/components/inputQ.vue";
var components = [buttonQ, inputQ];
const qqq = {
install(Vue) {
components.forEach((component) => {
Vue.component(component.name, component);
});
},
};
export default qqq;
打印component:
解析: install是一种固定的写法,遍历数组里面的组件，component.name组件的名字, componet 数组中的每一项也是就是要注册的组件，? Vue.component 提供的api。
在main.JS中的代码
import qqq from "@/module/index.js";
Vue.use(qqq);解析:Vue.use(qqq) 的时候，就会执行 index.JS文件里面的install方法，调用install方法和传递参数Vue。
也可以进行参数的传递:
main.JS
Vue.use(qqq, 6666);传递实参? :6666
idnex.JS
解析: 第一个参数Vue是固定的, 第二个参数ada用于接收? Vue.use( qqq?,6666)??中的第一个参数qqq，会触发install方法，第二个参数是实参