组件封装使用，vue 实现json 编辑器

本文主要是介绍组件封装使用，vue 实现json 编辑器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

依赖：

npm  install  vue-codemirror

可能遇到错误

npm  install file 

npm  install system 

子组件封装

components.vue 

<template>
  
    <codemirror
            class="code-dec"
            ref="jsonEditor"
            v-model="jsondata"
            :options="options"
            style="height: 600px;"
            @input="changeCode"
          />
  
  
  </template>
  
  <script>
    import { codemirror } from 'vue-codemirror'
    import 'codemirror/lib/codemirror.css'
    import 'codemirror/mode/javascript/javascript' 
    import 'codemirror/addon/selection/active-line' 
    import 'codemirror/keymap/sublime' 
    import 'codemirror/mode/css/css'
    import 'codemirror/theme/monokai.css' 
    import 'codemirror/addon/lint/lint'
    import 'codemirror/addon/lint/lint.css'
    import 'codemirror/addon/lint/json-lint'
    import 'codemirror/addon/display/autorefresh'
  
  
    export default{
      props:{
        codedata:{
          type:String,
          required:true,
          default:'{}'
        }
      },
      components: {
        codemirror
      } ,
      data () {
        return {
         jsondata:this.codedata,
          options:{
            tabSize: 4,
            mode: 'application/json',
            theme: 'base16-dark',
            lineNumbers: true,
            line: true,
            lint: true, // 代码格式检查
            gutters: ['CodeMirror-lint-markers', 'CodeMirror-foldgutter'],
          }
        }
      },

      methods: {
        
        getCodeValue(){
          let  codedata =  this.$refs.jsonEditor.codemirror
          console.log(codedata)
        },
        changeCode(newdata){
          this.jsondata=newdata
          console.log(this.jsondata)
          // 子传消息告诉父亲，执行方法和参数
          this.$emit('changeparent',newdata);
        }
      },

  
    }
  
  
  </script>

  <style lang="less" scoped>
    * /deep/ .code-dec  { touch-action: none; }
  </style>

父组件中使用子组件：

<template>
  
  <code-editor :codedata="data" @changeparent="changeValue"></code-editor>



</template>

<script>

  import codeEditor from "@/components/codeEditor"

  export default{
    components: {
      codeEditor
    } ,
    data () {
      return {
        data:'{"11":222}'
      }
    },
    methods: {
      changeValue(value){
        this.codedata= value
        console.log(`父组件值: ${this.codedata}`)
      }

    },
    created () {
      
      this.data =JSON.stringify({"a1":111111})
     }

  }


</script>

这篇关于组件封装使用，vue 实现json 编辑器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！