vue子组件向父组件传值

755 阅读1分钟

子组件pass 1.在子组件中创建一个按钮,给按钮绑定一个点击事件 2.使用 $emit 来触发一个自定义事件,并传递参数

<template>
  <div>
    <el-row>
      <el-button type="primary" plain @click="set">子传父值</el-button>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    set() {
      this.$emit("sonSet", [
        {
          name: "张三",
          id: 1
        },
        {
          name: "李四",
          id: 2
        }
      ]);
    }
  }
};
</script>

父组件fath 1.在父组件中的子标签中监听子组件定义的事件名 2.获取传过来的值

<template>
  <div>
    <Pass @sonSet="getlist"></Pass>
  </div>
</template>
<script>
import Pass from "../components/Pass";
export default {
  data() {
    return {

    };
  },
  components: {
    Pass
  },
    getlist(e){
      console.log(e)
    }
  },

};
</script>

image.png