Vue는 시각적 드래그 앤 드롭 사용자 정의 양식을 구현합니다(코드 예)

export default Vue.component('CustomTemplate', {
    props: {
        html: String
    },
    render (h) {
      return h(Vue.extend({ // 关键点
          template: `<div class="root-custom-template">${this.html}</div>`,
          data () {
            return {
              current: ''
            }
          },
          methods: {
            doclick (uuid, id) {
              this.current = uuid
              this.$store.commit('EditPanel/changeId', uuid)
            },
            dodragstart (ev) {
              ev.dropEffect = 'move'
            }
          }
    }))
  },
})

computed: {
    myList: {
        get() {
            return this.$store.state.myList
        },
        set(value) {
            this.$store.commit('updateList', value)
        }
    }
}

var a = { k: 1 }
var b = a
b.k = 2
console.log(a) // { k: 2 }

function deepFreeze(obj) {

  // 取回定义在obj上的属性名
  var propNames = Object.getOwnPropertyNames(obj);

  // 在冻结自身之前冻结属性
  propNames.forEach(function(name) {
    var prop = obj[name];

    // 如果prop是个对象，冻结它
    if (typeof prop == 'object' && prop !== null)
      deepFreeze(prop);
  });

  // 冻结自身(no-op if already frozen)
  return Object.freeze(obj);
}