vue子组件的使用和事件传递

╰半橙微兮° 2022-06-04 01:47 461阅读 0赞

# vue子组件的使用和事件传递 #

在使用vue进行编程的时候我们经常会遇到在多个界面重用功能，比如联动的下拉框，重复的表单等等。如果在每个模块里面都重新写一遍，在发生变更的时候需要修改很多的界面，导致了复杂的工作量。那么需要怎么样去处理呢？vue里面提供了子组件的方式，在我理解就是自定义标签。下面看一下效果。

![Center][]

在粉色的虚框中是子组件，它有一个值是aabbcc，通过点击子组件的自定义按钮，父组件就能收到相应的值。

具体的实现：

子组件

<template>
      <div style="border: hotpink 2px dashed;">
        <div>子组件</div>
        <div>发送 :{
        {data}}</div>
        <div>
          <el-button @click="test">自组件按钮</el-button>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'selfmodel',
        data () {
          return {
            msg: 'Welcome to Your Vue.js App',
            data: 'aabbcc'
          }
        },
        mounted(){
          this.getParams();
        },
        watch: {
          '$route'(to, from){
            //在这里重新刷新一下
            this.getParams();
          }
        },
        methods: {
          getParams: function () {
          },
          test: function () {
            alert(this.data);
            this.$emit("selfevent", this.data);
          },
        }
      }
    </script>
    
    
    <style>
      .el-container {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

父组件：

<template>
      <div>
        <div>
          父组件
        </div>
        <div>
          接收到的data:{
        {data}}
        </div>
        <div>
          <el-button @click="test">父组件按钮</el-button>
        </div>
        <div>
          <selfmodel @selfevent="selfevent"></selfmodel>
        </div>
      </div>
    </template>
    
    <script>
      import selfmodel from './selfmodel.vue'
      export default {
        components: {
          selfmodel
        },
        name: 'selfmodelparent',
        data () {
          return {
            msg: 'Welcome to Your Vue.js App',
            data: '',
          }
        },
        mounted(){
          this.getParams();
        },
        watch: {
          '$route'(to, from){
            //在这里重新刷新一下
            this.getParams();
          }
        },
        methods: {
          getParams: function () {
          },
          test: function () {
          },
          selfevent: function (...data) {
            console.log(data[0]);
            this.data = data[0];
          },
        }
      }
    </script>
    
    
    <style>
      .el-container {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

这里需要注意的是子组件和父组件之间传递值是通过emit方法进行的

子组件中使用

this.$emit("selfevent", this.data);

进行传递参数。

父组件中使用

selfmodel @selfevent="selfevent"></selfmodel>

进行接收参数。

[Center]: /images/20220604/8934c11aacb44bb58c1c03f5707e235f.png