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

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

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

在粉色的虚框中是子组件，它有一个值是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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .el-container {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

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

子组件中使用

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

进行传递参数。

父组件中使用

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

进行接收参数。