vue.js의 구성 요소에 데이터 전달

vue.js의 구성 요소에 데이터 전달

---

vue.js의 구성 요소간에 데이터를 전달하는 방법을 이해하는 데 어려움을 겪고 있습니다. 문서를 여러 번 읽었고 많은 vue 관련 질문과 자습서를 보았지만 여전히 이해하지 못하고 있습니다.

이것에 대해 머리를 감싸기 위해 꽤 간단한 예제를 완성하는 데 도움이되기를 바랍니다.

1. 하나의 구성 요소에 사용자 목록 표시 (완료)
2. 링크를 클릭 (완료)하면 사용자 데이터를 새 구성 요소로 보냅니다. 하단의 업데이트를 참조하십시오.
3. 사용자 데이터를 편집하고 원래 구성 요소로 다시 보냅니다 (지금까지 확인하지 않음).

다음은 2 단계에서 실패한 바이올린입니다. https://jsfiddle.net/retrogradeMT/d1a8hps0/

새 구성 요소에 데이터를 전달하기 위해 소품을 사용해야한다는 것을 이해하지만 기능적으로 수행하는 방법을 모르겠습니다. 데이터를 새 구성 요소에 어떻게 바인딩합니까?

HTML :

    <div id="page-content">
       <router-view></router-view>
     </div>

 <template id="userBlock" >
   <ul>
     <li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a>
     </li>
   </ul>
 </template>

  <template id="newtemp" :name ="{{user.name}}">
    <form>
      <label>Name: </label><input v-model="name">
      <input type="submit" value="Submit">
    </form>
  </template>

주요 구성 요소에 대한 Node.js :

Vue.component('app-page', {
  template: '#userBlock',

  data: function() {
    return{

        users: []
      }
    },

ready: function () {
    this.fetchUsers();
},

methods: {
    fetchUsers: function(){
        var users = [
          {
            id: 1,
            name: 'tom'
          },
          {
            id: 2,
            name: 'brian'
          },
          {
            id: 3,
            name: 'sam'
          },
        ];

        this.$set('users', users);
     }
    }
  })

두 번째 구성 요소에 대한 JS :

Vue.component('newtemp', {
  template: '#newtemp',
  props: 'name',
  data: function() {
    return {
        name: name,
        }
   },
})

최신 정보

좋아, 두 번째 단계를 알아 냈다. 다음은 진행 상황을 보여주는 새로운 바이올린입니다 : https://jsfiddle.net/retrogradeMT/9pffnmjp/

Vue-router를 사용하고 있기 때문에 데이터를 새 구성 요소로 보내는 데 소품을 사용하지 않습니다. 대신 v-link에 매개 변수를 설정 한 다음 전환 후크를 사용하여 수락해야합니다.

V-link 변경 사항 은 vue-router 문서에서 명명 된 경로를 참조하십시오 .

<a v-link="{ name: 'new', params: { name: user.name }}"> Show new component</a>

그런 다음 구성 요소에서 경로 옵션에 데이터를 추가하고 전환 후크를 참조하십시오 .

Vue.component('newtemp', {
  template: '#newtemp',
  route: {
   data: function(transition) {
        transition.next({
            // saving the id which is passed in url
            name: transition.to.params.name
        });
     }
  },
 data: function() {
    return {
        name:name,
        }
   },
})

---

------------- 다음은 Vue 1에만 적용됩니다. --------------

데이터 전달은 여러 가지 방법으로 수행 할 수 있습니다. 방법은 사용 유형에 따라 다릅니다.

---

새 구성 요소를 추가하는 동안 html에서 데이터를 전달하려는 경우. 그것은 소품을 사용하여 수행됩니다.

<my-component prop-name="value"></my-component>

이 소품 값은 속성에 소품 이름 prop-name을 추가하는 경우에만 구성 요소에서 사용할 수 있습니다 props.

---

일부 동적 또는 정적 이벤트로 인해 구성 요소에서 다른 구성 요소로 데이터가 전달되는 경우. 이는 이벤트 디스패처와 브로드 캐스터를 사용하여 수행됩니다. 예를 들어 다음과 같은 구성 요소 구조가있는 경우 :

<my-parent>
    <my-child-A></my-child-A>
    <my-child-B></my-child-B>
</my-parent>

그리고 당신은 데이터를 보낼 <my-child-A>에 <my-child-B>에 다음 <my-child-A>당신이 이벤트를 전달해야합니다 :

this.$dispatch('event_name', data);

이 이벤트는 상위 체인까지 이동합니다. 그리고 어떤 부모로부터 당신을 향한 분기를 가지고 <my-child-B>데이터와 함께 이벤트를 방송합니다. 그래서 부모 :

events:{
    'event_name' : function(data){
        this.$broadcast('event_name', data);
    },

이제이 방송은 자식 체인으로 이동합니다. 그리고 이벤트를 잡으려는 아이에게 우리의 경우 <my-child-B>다른 이벤트를 추가합니다.

events: {
    'event_name' : function(data){
        // Your code. 
    },
},

---

데이터를 전달하는 세 번째 방법은 v-link의 매개 변수를 사용하는 것입니다. 이 메서드는 구성 요소 체인이 완전히 파괴되거나 URI가 변경 될 때 사용됩니다. 그리고 나는 당신이 이미 그들을 이해하고 있음을 볼 수 있습니다.

---

원하는 데이터 통신 유형을 결정하고 적절하게 선택하십시오.

---

부모 구성 요소에서 자식으로 데이터를 보내는 가장 좋은 방법은 props를 사용하는 것입니다 .

다음을 통해 부모에서 자식으로 데이터 전달 props

• 자식에서 props(배열 또는 객체 ) 선언
• 그것을 통해 아이에게 전달하십시오 <child :name="variableOnParent">

아래 데모를 참조하십시오.

Vue.component('child-comp', {
  props: ['message'], // declare the props
  template: '<p>At child-comp, using props in the template: {{ message }}</p>',
  mounted: function () {
    console.log('The props are also available in JS:', this.message);
  }
})

new Vue({
  el: '#app',
  data: {
    variableAtParent: 'DATA FROM PARENT!'
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>

<div id="app">
  <p>At Parent: {{ variableAtParent }}</p>
  <child-comp :message="variableAtParent"></child-comp>
</div>

---

문제가 여기에 있다고 생각합니다.

<template id="newtemp" :name ="{{user.name}}">

prop에 접두사 :를 붙이면 Vue에 문자열이 아니라 변수임을 나타냅니다. 따라서 {{}}주위 가 필요하지 않습니다 user.name. 시험:

<template id="newtemp" :name ="user.name">

편집하다-----

The above is true, but the bigger issue here is that when you change the URL and go to a new route, the original component disappears. In order to have the second component edit the parent data, the second component would need to be a child component of the first one, or just a part of the same component.

---

I've found a way to pass parent data to component scope in Vue, i think it's a little a bit of a hack but maybe this will help you.

1) Reference data in Vue Instance as an external object (data : dataObj)

2) Then in the data return function in the child component just return parentScope = dataObj and voila. Now you cann do things like {{ parentScope.prop }} and will work like a charm.

Good Luck!

---

A global JS variable (object) can be used to pass data between components. Example: Passing data from Ammlogin.vue to Options.vue. In Ammlogin.vue rspData is set to the response from the server. In Options.vue the response from the server is made available via rspData.

index.html:

<script>
    var rspData; // global - transfer data between components
</script>

Ammlogin.vue:

....    
export default {
data: function() {return vueData}, 
methods: {
    login: function(event){
        event.preventDefault(); // otherwise the page is submitted...
        vueData.errortxt = "";
        axios.post('http://vueamm...../actions.php', { action: this.$data.action, user: this.$data.user, password: this.$data.password})
            .then(function (response) {
                vueData.user = '';
                vueData.password = '';
                // activate v-link via JS click...
                // JSON.parse is not needed because it is already an object
                if (response.data.result === "ok") {
                    rspData = response.data; // set global rspData
                    document.getElementById("loginid").click();
                } else {
                    vueData.errortxt = "Felaktig avändare eller lösenord!"
                }
            })
            .catch(function (error) {
                // Wu oh! Something went wrong
                vueData.errortxt = error.message;
            });
    },
....

Options.vue:

<template>
<main-layout>
  <p>Alternativ</p>
  <p>Resultat: {{rspData.result}}</p>
  <p>Meddelande: {{rspData.data}}</p>
  <v-link href='/'>Logga ut</v-link>
</main-layout>
</template>
<script>
 import MainLayout from '../layouts/Main.vue'
 import VLink from '../components/VLink.vue'
 var optData = { rspData: rspData}; // rspData is global
 export default {
   data: function() {return optData},
   components: {
     MainLayout,
     VLink
   }
 }
</script>

참고URL : https://stackoverflow.com/questions/34534151/passing-data-to-components-in-vue-js