vue单文件组件开发
子组件
这是我写的一个分享功能组件
<template>
<van-share-sheet
v-model="isShowShare"
title="立即分享给好友"
:options="optionArray"
@select="onSelect"
/>
</template>
<script>
import Vue from 'vue';
import { ShareSheet } from 'vant';
Vue.use(ShareSheet);
export default {
name: "share",
props:{//绑定外部传进来的数据
value:{// 接收v-model中的数据
type: Boolean,
required:true,
},
shareContent: {
type: String,
required: true,
},
sharePic: {
type: Object,
required: false,
},
shareExtra: {
type: Object,
required: false,
},
},
data(){
return{
optionArray:[
{ name: '微信', icon: 'wechat' },
{ name: '朋友圈', icon: 'https://img01.yzcdn.cn/vant/share-sheet-wechat-moments.png' },
{ name: 'QQ', icon: 'qq' },
],
shares:'',
isShowShare:this.value,
}
},
watch:{
'isShowShare':function(newVal){
this.$emit('input',newVal);
},
'value':function(newVal){
this.isShowShare=newVal;
},
},
created(){
this.shares = this.getServicesShare();
if(this.shares){
for (let index = 0; index < this.shares.length; index++) {
const share = this.shares[index];
if(share.id=="weixin"){
this.optionArray[0].share=share;
this.optionArray[1].share=share;
}else if(share.id=="qq"){
this.optionArray[2].share=share;
}
}
}
},
methods: {
onSelect(option) {
if (option.share && this.shareContent) {
this.shareAction(option.share,this.shareContent,this.sharePic,this.shareExtra);
}else{
this.$toast("不支持此类分享");
}
this.isShowShare= false;
},
}
}
</script>
父组件
<template>
<div >
<van-button @click="openShare" >分享</van-button>
<share v-model="showShare" :shareContent="shareContent"/>//组件并传输属性
</div>
</template>
<script>
import share from "../../share/share.vue";//引入单文件组件
export default {
name: "replyCard",
components:{
share//引入组件
},
data() {
return {
showShare:false,
shareContent:""
};
},
methods: {
openShare(){
this.shareContent="你好我来分享了!!!!";
this.showShare=true;
}
},
};
</script>
<style lang="less" scoped>
.follow{
position: relative;
bottom: 24px;
left: 140px;
background: #eee;
color: #1989fa;
border: 0px;
font-size: 14px;
}
</style>
解决v-model双向绑定
单文件组件时单向数据流,父组件变化子组件刷新变化,但子组件不能建议改变父组件传入的属性否则报错如果是object类型不会报错但不建议修改
如何使用v-model与父组件引入时绑定?
vue官网解释v-mode不多说l
要想学习组件建议官网查看组件基础等
我这里使用watch监听解决双向绑定问题
watch:{
'isShowShare':function(newVal){
this.$emit('input',newVal);
},
'value':function(newVal){
this.isShowShare=newVal;
},
},
引入单文件组件和局部引入
import { a,b} from ‘test’;//引入变量-引入单个、多个
test
const a= [{
'arrowIcon': require('../../public/settings/显示.png'),
'allColumnsTitle': '显示单词',
'allColunmnsSwitch': '0',
'isTure': 'false'
}]
const b= [{
'arrowIcon': require('../../public/settings/显示.png'),
'allColumnsTitle': '显示单词',
'allColunmnsSwitch': '0',
'isTure': 'false'
}]
//输出-传出参数(对外输出本模块(一个文件可以理解为一个模块)变量的接口)
export {
a,
b
}
import share from “…/…/share/share.vue”;//引入单文件组件
//引入组件
import share from "../../share/share.vue";
//注册组件
export default {
components: { share }
}
import xxx from和import { xxx } from 区别
通过上述几种常用引入方式我们可以了解到,这两种书写方式的区别,可以通俗的理解为整体与局部;
将文件作为一个整体引入则是使用:import xxx from ‘路径’
引入文件的一部分或某些部分的时候会使用带{}的方式:import { xxx } from ‘路径’
引入路径
import share from “…/…/share/share.vue”;//…/是当前目录的上一级目录
import share from “@/view/share/share.vue”;// @/是src目录
本人主栈后端,也在学习的路上,希望共同成长!理解不对的请指教。如果您绝的有用请帮我点个赞谢谢了。