美文网首页
vue 子组件获取fu组件属性和方法

vue 子组件获取fu组件属性和方法

作者: 肥羊猪 | 来源:发表于2021-06-07 18:04 被阅读0次

fu组件:

    <el-dialog width="55%" title="选择CC券" :visible.sync="ccVisible" append-to-body>
      <!-- 选择 -->
      <getCC @closed="closed" @changeTitle="changeTitle" v-model="checkedCC" :ccVisible="ccVisible"></getCC>
    </el-dialog>
data() {
    return {
      ccVisible: false, // 选择
      checkedCC: {} // 
}}
  methods: {
    closed() {
      this.ccVisible = false;// 关闭弹窗
    },
// 父组件中的changeTitle方法
changeTitle(value) {
  this.title = value;
}

子组件:

<el-button :disabled="row.flag" type="text" @click="checkCC(row)">选择</el-button>
export default {
  name: "getCC",
  props: {
    value: {
      type: Object,
      default: {},
    },
  },

methods: {
    async getList() {
      await couponsCCList(this.formInline);
    },
    checkCC(row) {
      this.$emit('changeTitle','new title')
      this.$emit('closed');// 关闭弹窗
      this.$emit('input', row);// 获取子组件的数据传给父组件 v-model 相当于 value值 加一个 input事件
    },
  }
}

官网参考:https://cn.vuejs.org/v2/api/#vm-emit

相关文章

网友评论

      本文标题:vue 子组件获取fu组件属性和方法

      本文链接:https://www.haomeiwen.com/subject/gytreltx.html