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

开发: 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()
          }
        }