Vue子组件调用父组件事件的三种方法

• 前端

1. 在子组件中通过this.$parent.event来调用父组件的方法，data参数可选

  
    
我是父组件

    
  


  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) {
        console.log('我是父组件方法');
      }
    }
  };

  
    
我是子组件

    
  


  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod(data);
        console.log('调用父组件方法')
      }
    }
  };

2.父组件使用v-bind绑定一个变量(v-bind:变量名=”值”)，子组件用props接收（与created同级）

  
    这是父组件
    
  


import child from "@/components/child";
export default {
  components: { child },
  data() {
    return {};
  },
  methods: {
    parentHandler() {
      console.log("这是父组件的方法");
    },
  },
};

  
    这是子组件
    
  


export default {
  props: {
    parentHandler: {
      type: Function,
      default: () => {
        return Function;
      },
    },
    //parentHandler: {
    //   type: Object,
    //   default: () => {
    //     return {}
    //   },
    //},
    // parentHandler: {
    //   type: Boolean,
    //   default: true,
    // },
    // parentHandler: {
    //   type: Array,
    //   default: () => {
    //     return []
    //   },
    // },
    // parentHandler: {
    //   type: String,
    //   default: '',
    // },
  },
  methods: {
    handler() {
      this.parentHandler();
    },
  },
};

3.使用$refs传值

  
    
这是父组件

    
    
这是父组件中引用的子组件

    
  



//子组件地址（仅供参考），具体以实际项目目录地址为准
import child from "./Child.vue";
export default {
  components: {
    child: child
  },
  data() {
    return {};
  },
  methods: {
    // 向子组件传值
    setChildInfo() {
      this.$refs.child.cInfo = "c2";
      //this.$refs.child.open("c2");
    }
  }
};


  
    
收到父组件数据：{{ cInfo }}

  



export default {
  data() {
    return {
      cInfo: "c1"
    };
  },
  methods: {
    //open(data) {
    //  console.log(data);
    //},
  },
};

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/40f0328bee.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐