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知识库 -> vue进阶复习笔记3 -> 正文阅读

[JavaScript知识库]vue进阶复习笔记3

一、组件通信之子传父

给父组件发送信息需要使用$emit(参数一,参数二)方法,第一个参数为自定义方法名,第二个参数为需要传递的值。

案例:

<script src="js/vue.js"></script>
    <div id="app">
      <!--父子通讯的桥梁-->
      <son v-on:son_div="fromsonmethod"></son>
    </div>
<template id="son">
  <div>
    <input type="button" v-on:click="son_method" value="点我给父组件发送信息">
  </div>
</template>
<script>
  const app=new Vue({
    el:"#app",
    methods: {
      fromsonmethod(msg){
        alert(msg)
      }
    },
    components:{
        son:{
          template:`#son`,
          methods:{
            son_method(){
            //  给父组件发送信息
            //  第一个参数自定义方法名,第二个参数需要传的值
              this.$emit('son_div','我是子组件传递来的信息')
            }
          }
        }
     }
  })
</script>

结果:

?

二、父组件直接操作子组件的属性和方法

父组件有两种方式对子组件进行操作:

1.$children方法

通过$children访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值。

但是当子组件过多,我们需要拿到其中一个时,往往不能确定它的索引值,甚至还可能会发生变化,所以不推荐使用。

methods: {
      get_son(){
      //  操作 $children[0]是通过索引去读取子组件,不精准
      this.$children[0].son_message="这是children方法"
      this.$children[0].son_method()
      }
    }

2.$refs方法

$refs的方法更加人性化,我们想明确获取其中一个特定的组件,这个时候就可以使用$refs

$refs和ref指令通常是一起使用的。

我们通过ref给某一个子组件绑定一个特定的ID。

通过this.$refs.ID找到这个特定的ID就可以访问到该组件了。

//调用子组件时设置ref属性,方便$refs方法找到对应子组件
<son ref="abc"></son>


methods: {
      get_son(){
        //$refs  人性化方式
        this.$refs.abc.son_message="$refs方法"
        this.$refs.abc.son_method()
      }
    },

三、子组件直接操作父组件的属性和方法

子组件有两种方式对父组件进行操作:

两者的区别是如果存在多级子组件,通过$parent访问得到的是它最近一级的父组件,通过root访问得到的是根组件。

1.$parent方法

methods:{
          set_father(){
            //操作  $parent 弊端
            this.$parent.f_message="parents方法"
            this.$parent.f_methods()
          }
        }

2.$root方法

methods:{
          set_father(){
            //$root 精准
            this.$root.f_message="root方法"
            this.$root.f_methods()
          }
        }

四、安装node以及vue-cil步骤

1.安装node,使用node -v查看是否安装成功

2.安装vue-cli

使用npm install -g @vue/cli安装vue-cli

使用vue -V查看是否安装完成

?

3.切换镜像

如果多次安装失败,可切换镜像,切换为华为镜像会快一点

npm?config?set?registry?https://mirrors.huaweicloud.com/repository/npm/

五、创建Vue项目

1.使用vue? create 项目名创建项目

2.创建项目模板

选择Manually select features 创建新的项目模板

?

3.选择要下载的插件

一般选择以下四个,按空格键选择,按回车下一步

?4.选择版本

五、选择是否保存模板

如果保存的话,下一次就可以直接用保存好的模板创建项目

六、选择配置信息存放位置,单独存放或者并入package.json

一般选择存入package.json

?设置完成后项目自动创建完成,若创建太man或创建失败,一定要修改镜像

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-25 12:06:48  更:2021-08-25 12:08:56 
 
开发: 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年11日历 -2024/11/23 12:49:40-

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