Vue 인스턴스 내의 Vue 인스턴스

Vue 인스턴스 내의 Vue 인스턴스

up peop people!

여기 HTML 코드가 있어:

// index.html
<div data-init="component-one">
  <...>

 <div data-init="component-two">
   <button @click="doSomething($event)">
 </div>
</div>

이것은 기본적으로 내가 모든 것을 정확하게 이해했다면 다른 Vue 인스턴스 안에 있는 Vue 인스턴스를 참조한다.각각의 JS 코드는 두 개의 파일로 분할되어 다음과 같이 보인다.

// componentOne.js
new Vue(
  el: '[data-init="component-one"]',
  data: {...},
  methods: {...}
);


// componentTwo.js
new Vue(
  el: '[data-init="component-two"]'
  data: {...}
  methods: {
    doSomething: function(event) {...}
  }
);

자, 이것의 문제는,doSomething로부터componentTwo부름을 받지 않는다.

근데 인라인 같은 거 하면.{{ 3 + 3 }}그것은 계산되어야 할 것처럼 계산된다.그래서 Vue는 무언가가 있다는 것을 안다.그리고 그것은 또한 그것을 제거한다.@click페이지 로딩에 대한 요소

하고 만지작거렸다.inline-template역시, 하지만 이런 상황에서 내가 기대했던 것만큼 효과가 있지는 않아.그리고 어차피 이 사건을 위한 것이 아니란 걸 알고 다시 취하했다.

여기에 올바른 접근법이 무엇이 있을까?그리고 지금 어떻게 하면 이 일을 가장 쉽게 만들 수 있을까?

우리가 사용하는 Vue 버전은2.1.8.

건배!

문제는 두 개의 vue 인스턴스가 서로 중첩되어 있다는 것이다.요소가 중첩된 경우 동일한 인스턴스를 사용하거나 시도하십시오.components

https://jsfiddle.net/p16y2g16/1/

// componentTwo.js
var item = Vue.component('item',({
  name:'item',
    template:'<button @click="doSomething($event)">{{ message2 }</button>',
    data: function(){
      return{ 
        message2: 'ddddddddddd!'
    }},
  methods: {
    doSomething: function(event) {alert('s')}
  }
}));

var app = new Vue({
  el: '[data-init="component-one"]',
  data: {
    message: 'Hello Vue!'
  }
});

<div data-init="component-one">
  <button >{{ message }}</button>
  <item></item>
</div>

서로 독립된 경우 다음과 같이 별도의 예가 작동한다.

https://jsfiddle.net/p16y2g16/

var app = new Vue({
  el: '[data-init="component-one"]',
  data: {
    message: 'Hello Vue!'
  }
});

// componentTwo.js
var ddd = new Vue({
  el: '[data-init="component-two"]',
    data: {
      message: 'ddddddddddd!'
    },
  methods: {
    doSomething: function(event) {alert('s')}
  } 
});

그런데 {{ 3 + 3 }}}} 같은 인라인 작업을 하면, 그렇게 계산이 된다.그래서 Vue는 무언가가 있다는 것을 안다.

부모 인스턴스 'componentOne'이(가) 있기 때문이다.이 템플릿에 대해 Vue를 활성화했다.내부에 다른 인스턴스를 설정해야 하는 경우 템플릿의 일부를 분리하십시오.예(코드 조각에서 지연될 수 있음!) . 대안

https://jsfiddle.net/qh8a8ebg/2/

// componentOne.js
new Vue({
  el: '[data-init="component-one"]',
  data: {
  	text: 'first'
  },
  methods: {}
});


// componentTwo.js
new Vue({
  el: '[data-init="component-two"]',
  data: {
  	text: 'second'
  },
  template: `<button @click="doSomething($event)">{{text}}</button>`,
  methods: {
    doSomething: function(event) {
    	console.log(event);
    }
  }
});

<script src="https://vuejs.org/js/vue.min.js"></script>
<div data-init="component-one">
{{text}}
</div>
 <div data-init="component-two">
 </div>

구성 요소-2 내부의 버튼 요소는 Vue에서 슬롯으로 참조된다.@click 지시 값 평가는 상위 구성 요소(구성 요소 1, 호스트 구성 요소 2)에서 이루어진다.따라서 클릭 핸들러를 저쪽(구성 요소 1 위)으로 선언해야 한다.

핸들러를 구성요소-2 내에서 처리하려면, 슬롯 요소의 (구성요소-2) 템플릿에 있는 슬롯 요소에 대한 클릭 지시어를 선언하고, 예를 들어 처리기 함수를 팝으로 전달해야 한다.

행운을 빈다

vue-cli를 사용하여 웹 팩 스타터 앱을 생성하십시오. vue init app --webpack

그런 다음 이러한 방식으로 구성 요소를 구성하십시오.자세한 내용: https://vuejs.org/v2/guide/components.html#What-are-Components

1. 이것은 main.js이다.

import Vue from 'vue'
import ComponentOne from './ComponentOne.vue'
import ComponentTwo from './ComponentTwo.vue'

new Vue({
  el: '#app',
  template: '<App/>',
  components: { 
    ComponentOne,
    ComponentTwo
  }
})

2. 컴포넌트원 입니다.부에를 하다

<template>
  <div class="user">
    <div v-for="user in users">
      <p>Username: {{ user.username }}</p>
    </div>
  </div>
</template>


<script>
export default {
  data () {
    return {
      users: [
        {username: 'Bryan'},
        {username: 'Gwen'},
        {username: 'Gabriel'}
      ]
    }
  }
}
</script>

3. 컴포넌트 투 입니다.부에를 하다

<template>
  <div class="two">
    Hello World
  </div>
</template>


<script>
export default {

}
</script>

<div th:if="${msg.replyFloor}">
    <div class="msg-lists-item-left">
        <span class="msg-left-edit"
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">您在</span>
        <span th:text="${msg.topic.title}"
              class="msg-left-edit-res"
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">问题回答</span>
        <span th:text="${msg.type.name}"
              class="msg-left-edit "
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">帖子相关</span>
        <span class="msg-left-edit-number" >
            产生了<span th:text="${msg.unreadCount} ? : ${msg.unreadCount} + '条新' : ${msg.unreadCount} + '条' "
                       th:class="${msg.unreadCount} ? : 'number-inner':''">2132条</span>回复
        </span>
    </div>
    <div class="msg-lists-item-right">
        <span th:text="${msg.lastShowTime}">2017-8-10</span>
    </div>
</div>

참조URL: https://stackoverflow.com/questions/42645860/vue-instance-inside-vue-instance