vue组件使用和组件中使用v-model和数据传输

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目录

本人主栈后端，也在学习的路上，希望共同成长！理解不对的请指教。如果您绝的有用请帮我点个赞谢谢了。