>

<component v-for="..."> 를 사용하고 있습니다  Vue.js 2.3의 태그를 사용하여 구성 요소 목록을 동적으로 렌더링합니다.

템플릿은 다음과 같습니다 :

<some-component v-for="{name, props}, index in modules" :key="index">
    <component :is="name" v-bind="props"></component>
</some-component>

modules  배열은 내 구성 요소 data() 에 있습니다  여기 :

modules: [
    {
        name: 'some-thing',
        props: {
            color: '#0f0',
            text: 'some text',
        },
    },
    {
        name: 'some-thing',
        props: {
            color: '#f3f',
            text: 'some other text',
        },
    },
],

v-bind={...} 를 사용하고 있습니다  소품을 동적으로 바인딩하는 객체 구문이며 완벽하게 작동합니다. 또한 이벤트 리스너를 v-on 와 바인딩하고 싶습니다.  ( .sync 사용 이 접근 방식을 사용하지만 사용자 지정 지시문을 만들지 않고 가능한지 모르겠습니다.

props 에 추가하려고했습니다.  이와 같은 객체이지만 작동하지 않았습니다.

props: {
    color: '#f3f',
    text: 'some other text',
    'v-on:loaded': 'handleLoaded', // no luck
    'volume.sync': 'someValue', // no luck
},

제 목표는 사용자가 vuedraggable 를 사용하여 사이드 바에서 위젯을 재정렬하는 것입니다. 레이아웃 환경 설정을 데이터베이스에 유지하지만 일부 위젯에는 @event 가 있습니다. s와 .sync 에드 prop 에스. 이것이 가능한가? 제안을 환영합니다!

  • 답변 # 1

    동적 구성 요소를 사용하여이 작업을 수행 할 수있는 방법을 모르겠습니다. 그러나 렌더링 기능을 사용하여 수행 할 수 있습니다.

    이 데이터 구조를 고려하십시오. 이것은 귀하의 구조입니다.

    modules: [
      {
        name: 'some-thing',
        props: {
          color: '#0f0',
          text: 'some text',
        },
        sync:{
          "volume": "volume"
        },
        on:{
          loaded: "handleLoaded"
        }
      },
      {
        name: 'other-thing',
        on:{
          clicked: "onClicked"
        }
      },
    ],
    
    

    여기서 다른 두 속성을 정의하고 있습니다 : sync  그리고 on . 와이즈 비즈  property는 sync 하려는 모든 특성 목록을 포함하는 오브젝트입니다. . 예를 들어, sync 위  구성 요소 중 하나의 특성에 sync 가 포함되어 있습니다. . 이는 일반적으로 volume: "volume" 로 추가하려는 속성을 나타냅니다. . 동적 구성 요소에 동적으로 추가 할 수있는 방법은 없지만 렌더링 함수에서는 설탕을 뺀 부분으로 분해하고 :volume.sync="volume" 에 대한 속성과 처리기를 추가 할 수 있습니다 .

    updated:volume 와 유사하게  렌더링 함수에서 속성에서 값으로 식별 된 메소드를 호출하는 키로 식별 된 이벤트에 대한 핸들러를 추가 할 수 있습니다. 해당 렌더링 함수에 가능한 구현이 있습니다.

    on
    
    

    기본적으로 render 메소드는 render(h){ let components = [] let modules = Object.assign({}, this.modules) for (let template of this.modules) { let def = {on:{}, props:{}} // add props if (template.props){ def.props = template.props } // add sync props if (template.sync){ for (let sync of Object.keys(template.sync)){ // sync properties are just sugar for a prop and a handler // for `updated:prop`. So here we add the prop and the handler. def.on[`update:${sync}`] = val => this[sync] = val def.props[sync] = this[template.sync[sync]] } } // add handers if (template.on){ // for current purposes, the handler is a string containing the // name of the method to call for (let handler of Object.keys(template.on)){ def.on[handler] = this[template.on[handler]] } } components.push(h(template.name, def)) } return h('div', components) } 의 모든 속성을 살펴 봅니다.  와이즈 비즈  컴포넌트 렌더링 방법을 결정합니다. 속성의 경우 그냥 전달합니다. template  속성은 속성 및 이벤트 핸들러로, modules 로 분류합니다.  적절한 이벤트 핸들러를 추가합니다.

    이 작업의 예는 다음과 같습니다.

    sync
    
    

    on
    
    

    console.clear() Vue.component("some-thing", { props: ["volume","text","color"], template: ` <div> <span :style="{color}">{{text}}</span> <input :value="volume" @input="$emit('update:volume', $event.target.value)" /> <button @click="$emit('loaded')">Click me</button> </div> ` }) Vue.component("other-thing", { template: ` <div> <button @click="$emit('clicked')">Click me</button> </div> ` }) new Vue({ el: "#app", data: { modules: [{ name: 'some-thing', props: { color: '#0f0', text: 'some text', }, sync: { "volume": "volume" }, on: { loaded: "handleLoaded" } }, { name: 'other-thing', on: { clicked: "onClicked" } }, ], volume: "stuff" }, methods: { handleLoaded() { alert('loaded') }, onClicked() { alert("clicked") } }, render(h) { let components = [] let modules = Object.assign({}, this.modules) for (let template of this.modules) { let def = { on: {}, props: {} } // add props if (template.props) { def.props = template.props } // add sync props if (template.sync) { for (let sync of Object.keys(template.sync)) { // sync properties are just sugar for a prop and a handler // for `updated:prop`. So here we add the prop and the handler. def.on[`update:${sync}`] = val => this[sync] = val def.props[sync] = this[template.sync[sync]] } } // add handers if (template.on) { // for current purposes, the handler is a string containing the // name of the method to call for (let handler of Object.keys(template.on)) { def.on[handler] = this[template.on[handler]] } } components.push(h(template.name, def)) } return h('div', components) }, })

관련 자료

  • 이전 wpf - Windows 10에서 닫기/최소화/축소 버튼의 글꼴 군은 무엇입니까?
  • 다음 Jenkins OpenID Connect plugin - jenkins openid connect 플러그인 - userinfoserverurl