vue组件

vue组件

父组件调用子组件的方法

# 父组件页面
<PwdUpdate ref="pwdUpdate" :inLogin="inLogin" @submitSuccess="submiuFun"></PwdUpdate>

# 定义一个ref，调用子组件中的方法
this.$refs.pwdUpdate.closeFunc()

# 子组件页面
<template>
    <div>
    </div>
</template>

<script>
// 导入组件
import headerComponent from "./head.vue";
// 导出模块
export default {
  // 模块名字
  name: "template",
  // 模块数据
  data() {
    //数据  
    return {};
  },
  // 注册组件
  components: {
    headerComponent
  },
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    closeFunc() {},
  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {},
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {},
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {}
};
</script>
// scoped 样式只在本组件使用
<style scoped>
/**
 * 导入css样式组件
 * @import "../assets/css/components/index.css";
 */
</style>

子组件调用父组件的方法

1、 在其父组件中，将这个方法绑定

getHostInfo(data) {
   // 监听到子组件传过来的值
}

2、 子组件调用父组件的方法：this.$emit()进行传值

onClose: function () {
    this.dialogFormVisibleAdd = false
    this.$emit('getHostInfo', "127.0.0.1")
}