ref组件之间传值, Vue.use注册

一 父获取子组件实例对象 （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方法，第二个参数是实参