您现在的位置是：首页 > 网站制作 > vue.js心得vue.js心得

vue自定义封装组件

蒙xs2021-08-23【vue.js心得】人已围观

简介自定义组件

1.子组件
<template>
    <div>
        <h1 @click="tabQieh">{{tabArr}}</h1>
    </div>
</template>
<script>
export default {
  data() {
    return {
        quotation: 0,
    };
  },
  props: {
    tabArr: {
    //   type: Array,
      default:true
    },
  },
  methods:{
      tabQieh(name){
          this.$emit('tabQiehClick',name)
      },
  }
};
</script>

2.父组件
（1）引入
import daTab from "@/components/Heade/Heade.vue";
（2）注册
components: {
    daTab,
  },
（3）使用
<da-tab :tabArr="tabArr" @tabQiehClick="tabQieh"></da-tab>
完整父组件
<template>
  <div class="Index">
    <da-tab :tabArr="tabArr" @tabQiehClick="tabQieh"></da-tab>
  </div>
</template>
<script>
import { query } from "@/request/api"; // 导入api接口
import daTab from "@/components/Heade/Heade.vue";
export default {
  components: {
    daTab,
  },
  name: "Index",
  data(){
    return{
        tabArr:'我是父组件'
    }
  },
  created() {
    this.OnGit();
  },
  methods: {
    OnGit() {
      // 调用api POST接口，并且提供了两个参数
      let data = {
        type: "top",
        page: "1",
        page_size: "10",
        is_filter: "1",
        key: "6436ac327df32f20b86b5c76f99c438c",
      };
      query(data).then((res) => {
        console.log(res);
      });
    },
    // 调用子组件的事件
    tabQieh(){
        console.log('调用了子组件的事件')
    }
  },
};
</script>

Tags：

很赞哦！ ()

上一篇：前端提交数据rsa加密

下一篇：全局定义链接