欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue组件通信四种方式

程序员文章站 2022-07-02 23:02:41
先来介绍一下Vue组件的类型1.全局组件Vue.component('my-component-name', { // ... 选项 ...})//使用时
2.局部组件var ComponentA = { data:... template:... methods:...}new Vue(...

先来介绍一下Vue组件的类型

1.全局组件

Vue.component('my-component-name', {
  // ... 选项 ...
})
//使用时
<div id="app">
   <my-component-name></my-component-name>
</div>

2.局部组件

var ComponentA = {
    data:...
    template:...
    methods:...
}
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA
  }
})

3.单文件组件

.vue文件,一个文件就是一个组件,一般vue构建一个项目时用到。

//一般三部分组成
<template>
<style>
<script>

组件通信的方法

  • props$emit
    父组件给子组件传值:父组件给子组件设置自定义属性,子组件添加props来接受属性。
    子组件给父组件传值:父组件给子组件设置自定义函数,子组件通过$emit给父组件的自定义函数传递参数 ,父组件通过接收参数获取到子组件传递过来的值。
        let parent = {
            data: function () {
                return {
                    msg: '我是父组件',
                    msgToChild: '父组件给子组件的数据',
                    msgFromChild:'还未收到子组件的数据'
                }
            },
            methods: {
                fn(value){//父组件用来接收数据
                       this.msgFromChild = value
                }
            },
            template: `
            <div>
              <div>{{msg}}</div>
              <div>{{msgFromChild}}</div>
              <child :tit="msgToChild" @onfn='fn'></child>
            </div>`
        }
        let child = {
            data: function () {
                return {
                    msg: '我是子组件',
                    msgToParent:'子组件给父组件的数据'
                }
            },
            methods: {
                //通过某种方式(按需要)触发$emit给父组件传递数据
                send(){
                    this.$emit('onfn',this.msgToParent)
                }
            },
            props: ['tit'],
            template: `
                <div>
                   <p>{{msg}}</p>
                   <p>{{tit}}</p>
                   <button @click='send'>点击给父组件发送数据</button> 
                </div>`
        }      
  • $parent$children
    在子组件中可以通过this.$parent.xxx来获取到父组件的数据,并且是他的亲生父亲。如果某个组件没有父亲,那么this.$parent获取到的是它本身。
    在父组件中,可以通过this.$children来获取到它的子组件,但是和parent不同的是,通过this.$children获取到的是一个数组,包括它所有的子组件。为了准确获取到某一个子组件的数据,可以通过设置子组件属性ref,例如<child ref='num1'></child>,在父组件中通过$children.refs.num1.xxx来获取到特定的子组件的数据。
    这种方法在组件嵌套多层的时候不太适应。
  • $emit$on
    这种方式不仅适用于父子组件,还适用于其他关系的组件,保证两个接口名称相同,就可以进行数据的发送和接收
var Event = new Vue(); //准备一个空实例对象
//组件一中
Event.$emit('接口名','数据1');
//组件二中
Event.$on('接口名',function('参数'){
    //接收到数据1,进行操作
})
  • 插槽
    父组件使用其他组件的时候,会用到标签的形式。例如,自定义组件com,那么在使用这个组件的时候,是这样的形式<com></com>,那么标签中间就可以放一些数据,通过在子组件中定义插槽slot来接收这些数据。
//组件com1的template
<div>
    <slot name = 's1' :msg="数据"></slot>
    <p>我是组件com1</p>
    <slot name = 's2'><slot>
</div>
//组件com2使用com1,com2的template
<div>
   <p>com2自己的一些内容</p>
   <com1>
      <template #s1="res">
          这里也可以获取子组件的数据,例如:res.msg
          插入一些数据
      </template>
      <template #s2>
          插入另一些数据
      </template>
   <com2>
</div>

需要注意的是slot的name#对应,这种方式不仅可以传递数据,还可以传递html代码。

  • vuex
    vuex是一个文件,可以在搭建vue项目时使用,用来共享数据。
    具体可以查看官方文档

本文地址:https://blog.csdn.net/weixin_42834729/article/details/107297387