vue单文件组件之自定义组件的使用
vue单文件组件之自定义组件的使用1、首先需要将封装的组件放到公共组件文件夹我这里是放在 common 里,里面一共封装了三个子组件,本文只拿其中的 pageList.vue 来举例。该组件是用来展示文章列表。其中pagesList.vue的部分内容如下:<template><div&
·
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();
},
}
}
更多推荐
已为社区贡献10条内容
所有评论(0)