zoukankan      html  css  js  c++  java
  • 应用六:Vue之父子组件间的三种通信方式

    (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的)

      组件是Vue的核心功能之一,也是我们在开发过程中经常要用到的。各个独立的组件之间如何进行数据的交互,下面介绍三种个人在开发过程中用过的方法~

    1、props$emit

      父组件通过props的方式向子组件传递数据;子组件通过$emit,在父组件中以v-on的方式接收回传的数据。接下来请看下面一个实例,

      定义父组件parent.vue,添加如下代码:

    <template>
      <div id="demo">
        <child :message="message" @getInputValue="getInputValue"></child>
      </div>
    </template>
    
    <script>
    import child  from '@/components/common/child.vue';
    export default {
      name: 'demo',
      components: {
        child
      },
      data() {
        return {
          message: 'hello'
        }
      },
      methods: {
        getInputValue(val) {
          this.message = val
          console.log(this.message)
        }
      }
    }
    </script>

     

      定义子组件child.vue,添加如下代码:

    <template>
      <div id="child">
        <el-input v-model="message" clearable placeholder="" @change="handleChangeInput"></el-input>
      </div>
    </template>
    
    <script>
    export default {
      name: 'child',
      props: {
        message: String
      },
      methods: {
        handleChangeInput(val) {
          this.$emit('getInputValue', val)
        }
      }
    }
    </script>

     

      假如子组件要访问在父组件中定义的数据message,首先要在父组件引用的子组件标签中绑定该数据,然后以props的方式传递到子组件;子组件对message做了修改之后以$emit的方式回传给父组件,父组件以方法getInputValue接收并重新赋值给message

     

    2、在子组件中定义getset方法

      先看如下的两段代码,定义父组件parent.vue,添加如下代码:

    <template>
      <div id="demo">
        <child ref="childComponent"></child><br>
        <el-button type="primary" @click="clickSet">set</el-button>
        <el-button type="primary" @click="clickGet">get</el-button>
      </div>
    </template>
    
    <script>
    import child  from '@/components/common/child.vue';
    export default {
      name: 'demo',
      components: {
        child
      },
      methods: {
        clickSet() {
          this.$refs.childComponent.setMessage('hello world');
        },
        clickGet() {
          let msg = this.$refs.childComponent.getMessage();
          console.log(msg);
        }
      }
    }
    </script>

     

      定义子组件child.vue,添加如下代码:

    <template>
      <div id="child">
        <span>{{message}}</span>
      </div>
    </template>
    
    <script>
    export default {
      name: 'child',
      data() {
        return {
          message: 'hello'
        }
      },
      methods: {
        getMessage() {
          return this.message;
        },
        setMessage(val) {
          this.message = val;
        }
      }
    }
    </script>

     

      假如父组件要访问在子组件中定义的数据message,可以通过$refs的方式访问子组件中定义的getMessagesetMessage方法。

     

    3、Vuex

      vuex状态管理用于全局存储数据状态,具体的应用请查阅前文《应用四:Vue之VUEX状态管理》,在此就不再详细说明。

  • 相关阅读:
    VS2010-MFC(Ribbon界面开发:创建Ribbon样式的应用程序框架)
    VS2010-MFC(图形图像:GDI对象之画刷CBrush)
    VS2010-MFC(图形图像:GDI对象之画笔CPen)
    VS2010-MFC(图形图像:CDC类及其屏幕绘图函数)
    VS2010-MFC(字体和文本输出:文本输出)
    VS2010-MFC(字体和文本输出:CFont字体类)
    VS2010-MFC(MFC常用类:MFC异常处理)
    矩阵快速幂
    Codeforces 510C (拓扑排序)
    UVA10305 Ordering Tasks
  • 原文地址:https://www.cnblogs.com/fengyuexuan/p/10975338.html
Copyright © 2011-2022 走看看