IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> ref组件之间传值 Vue.use注册 -> 正文阅读

[JavaScript知识库]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方法,第二个参数是实参

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-11-22 12:15:09  更:2021-11-22 12:15:46 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/20 20:57:00-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码