vue单文件组件之自定义组件的使用

vue单文件组件之自定义组件的使用

1、首先需要将封装的组件放到公共组件文件夹

我这里是放在 common 里，里面一共 7 个子组件，本文只拿其中的 nav.vue 来举例。该组件是用来给 h5 页面加头部导航栏。

其中 nav.vue 的部分内容如下：

<template>
    <div class='tab'>
      <img v-if="needBack" class="back" src="static/img/back.png" alt="">
      <div v-if="needBack" @click="goback" class="back-mask"></div>
      <div class="title">{{title}}</div>
      <img v-if="closeH5" class="close" src="static/img/closeH5.png" alt="">
      <div class="close-mask" v-if="closeH5" @click="closeCtro"></div>
    </div>
</template>

<script>
	export default {
	  props: ["title","needBack","closeH5"], // 分别代表导航标题、是否展示返回按钮、是否展示关闭按钮
	  data() {
	    return {};
	  },
	  methods: {
	  // 私有方法，返回上一级
	    goback() {
	      this.$router.go(-1)
	    },
	    // 将关闭按钮的事件传给引用该组件的页面
	    closeCtro() {
	    let params = {
			title: '哈哈' 
		}
	      this.$emit('closeCtro',params )
	    }
	  }
	};
</script>

<style scoped>
// 样式部分已省略
</style>

这里的 props 作用是将需要改变的属性传给调用页面，data() 的作用是用来存放不需要被父组件改变的属性，初始化，$emit() 方法可以将事件传给调用的页面

2、在父组件中引入 nav.vue 组件

这里在页面page.vue中引入该组件，父组件有两种方法调用子组件内的方法：

• 监听子组件通过 this.$emit 发布的事件，即在父组件 @发布的事件名
• 通过 this.$refs.名字来获取子组件的实例，然后直接调用子组件的方法

ref 有三种用法：

1、ref 加在普通的元素上，用 this.$refs.name 获取到的是dom元素

2、ref 加在子组件上，用 this.$refs.name 获取到的是组件实例，可以使用组件的所有方法。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
ref 和 $refs 传送门

<template>
  <div class="hello">
    <navigate :needBack="needBack" ref="nav" :title="title" @closeCtro="closeCtro" :closeH5='closeH5'></navigate>
    <!-- 业务代码 -->
  </div>
</template>
<script>
import navigate from "../commom/nav.vue";
export default {
  components: {
    navigate
  },
  name: "controller",
  data() {
	return {
			needBack: true,
			closeH5: true,
			title: ‘扫扫看电视’
		}
	},
	created() {
	// 通过 this.$ref 来调用子组件内部私有方法
		this.$refs.nav.goback()
	},
	methods: {
	// 通过监听 this.$emit 发布的方法  
	  closeCtro(e) {
	  	  console.log(e.title)  // 哈哈
	      let options = this.$route.query;
	      if (options && options.fromPage && options.fromPage == "app") {
	        this.$router.go(-1);
	        return;
	      }
	      VH5.closeH5();
	    },
	}
}