Vue Js의 한 구성 요소에서 다른 구성 요소로 데이터 값을 변경하는 방법

Programing

Vue Js의 한 구성 요소에서 다른 구성 요소로 데이터 값을 변경하는 방법

c10106 2022. 3. 18. 21:23

Vue Js의 한 구성 요소에서 다른 구성 요소로 데이터 값을 변경하는 방법

나는 Vue Js에 새로 왔다.그래서 나는 다른 구성요소의 데이터 값을 변경해야 하는 문제에 직면해 있다.

구성 요소 A:

<template>
   <div id="app">
      <p v-on:click="test ()">Something</p>
   </div>
</template>

import B from '../components/B.vue';
export default {
    components: {
        B
    },
    methods: {
        test: function() {
            B.data().myData = 124
            B.data().isActive = true
            console.log(B.data().myData);
            console.log(B.data().isActive);
        }
    }
}

구성 요소 B:

export default {
    data() {
        return {
            myData: 123,
            isActive: false

        }
    }

}

여전히 구성요소 B 데이터.그러나 구성요소 B 데이터에 영향을 미칠 수는 없다.구성 요소 A에서 구성 요소 B의 변경 내용을 데이터로 변경하고자 한다.내가 어떻게 그럴 수 있을까?

자세히 설명해 주시죠.나는 vue js 소품 속성을 보았지만 이해가 안 된다.

당신은 Vuex를 찾고 있다.

응용프로그램의 모든 데이터를 중앙 집중식으로 저장하기 때문에

그들의 문서를 봐봐, 꽤 간단할 거야.

소품들을 B부품에 물려줄 수 있다.이러한 소품은 상위 구성요소에 의해 업데이트될 수 있다.당신은 B를 부모가 현대화시키기 위해 말하는 것을 단순히 렌더링하는 바보 같은 요소라고 생각할 수 있다.예:

// Component A
<template>
   <div id="app">
      <p v-on:click="test ()">Something</p>
      <b data="myData" isActive="myIsActive"></b>
   </div>
</template>

<script>
import B from '../components/B.vue';
export default {
  components: {
    B
  },
  data() {
    return {
      myData: 0,
      myIsActive: false,
    };
  },
  methods: {
    test: function() {
      this.myData = 123
      this.myIsActive = true
    }
  }
}
</script>

// Component B
<template>
  <div>{{ data }}{{ isActive }}</div>
</template>

<script>
export default {
  props: {
    data: Number,
    isActive: Boolean
};
</script>

몇 가지 방법이 있는데...

만약 당신의 구성 요소가 부모 자식 관계를 가지고 있다면 당신은 부모로부터 자식에게 데이터 값을 전달할 수 있다.
하위 구성 요소가 변경되었을 때 상위 구성 요소와 다시 통신하려면 vuejs 이벤트 이미터(사용자 지정 이벤트)를 사용하여 데이터 값이 변경될 때 이벤트를 내보내고 해당 이벤트를 다른 구성 요소에서 청취하여 원하는 작업을 수행할 수 있다.
만약 당신의 구성 요소들이 관계가 없다면, 당신은 위의 것들보다 다른 것을 사용해야 한다.당신은 두 가지를 사용할 수 있다. 하나는 이벤트 버스, 다른 하나는 주 관리 도서관이다.vue에는 VueX.it이라는 공식 국가 관리 도서관이 있다. vuex가 아닌 다른 것을 사용하고 싶다면 reducx, mobx 등과 같은 것을 사용할 수 있다.

이 설명서는 당신이 알고 싶은 모든 것을 담고 있다.어떤 암호도 넣고 싶지 않아. 왜냐하면 의사선생님이 아주 명확하거든.

VueX가 가장 선호하는 방법이야!매우 사용하기 쉽다.

https://vuejs.org/v2/guide/components.html

//component A
Vue.component('my-button', {
  props: ['title'],
  template: `<button v-on:click="$emit('add-value')">{{title}}</button>`
});


Vue.component('my-viewer', {
  props: ['counter'],
  template: `<button>{{counter}}</button>`
});

new Vue({
  el: '#app',
  data: {
    counter: 0,
  },
  methods: {
    doSomething: function() {
      this.counter++;
    }
  }
})


Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
});

//parent
new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [{
        id: 1,
        title: 'My journey with Vue'
      },
      {
        id: 2,
        title: 'Blogging with Vue'
      },
      {
        id: 3,
        title: 'Why Vue is so fun'
      }
    ]
  }
});


Vue.component('blog-post2', {
  props: ['post'],
  template: `
                  <div class="blog-post">
                     <h3>{{ post.title }}</h3>
                     <button v-on:click="$emit('enlarge-text')">
                         Enlarge text
                     </button>
                     <div v-html="post.content"></div>
                 </div>`
})

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [{
        id: 1,
        title: 'My journey with Vue'
      },
      {
        id: 2,
        title: 'Blogging with Vue'
      },
      {
        id: 3,
        title: 'Why Vue is so fun'
      }
    ],
    postFontSize: 1
  },
  methods: {
    onEnlargeText: function() {
      this.postFontSize++;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<p>Two components adding & viewing value</p>
<div id="app">
  <my-button :title="'Add Value'" v-on:add-value="doSomething"></my-button>
  <my-viewer :counter="counter"></my-viewer>
</div>
<br>
<br>
<p>Passing Data to Child Components with Props (Parent to Child)</p>
<div id="blog-post-demo">
  <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
</div>

<p>Listening to Child Components Events (Child to Parent)</p>
<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post2 v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="onEnlargeText"></blog-post2>
  </div>
</div>

첫째, 당신은 두 가지 요소가 의사소통할 수 있도록 부모가 필요하다.할 때my-button구성 요소를 클릭하면 이벤트 트리거add-value바로 그거야doSomething()기능, 그런 다음 값을 업데이트하고 표시my-viewer구성 요소

HTML

     <!--PARENT-->
     <div id="app"> 
          <!--CHILD COMPONENTS-->
          <my-button :title="'Add Value'" v-on:add-value="doSomething"></my-button>
          <my-viewer :counter="counter"></my-viewer>
     </div>

VUE.JS

     //component A
     Vue.component('my-button',{
         props:['title'],
         template:`<button v-on:click="$emit('add-value')">{{title}}</button>`
     });

     //Component B
     Vue.component('my-viewer',{
        props:['counter'],
        template:`<button>{{counter}}</button>`
     });

     //Parent
     new Vue({
         el: '#app',
         data:{
            counter:0,
         },
         methods:{
             doSomething:function(){
               this.counter++;
             }
        }
     })

이 내용은 Vue 구성 요소 가이드를 기반으로 함

소품을 사용하여 자식 구성 요소에 데이터 전달(부모에서 자식으로)

VUE.JS

         //component (child)
         //Vue component must come first, else it won't work
         Vue.component('blog-post', {
             /*Props are custom attributes you can register on a component. When a 
               value is passed to a prop attribute, it becomes a property on that 
               component instance*/
             props: ['title'],
             template: '<h3>{{ title }}</h3>'
         });

         //parent
         new Vue({
            el: '#blog-post-demo',
            data: {
              posts: [
                 { id: 1, title: 'My journey with Vue' },
                 { id: 2, title: 'Blogging with Vue' },
                 { id: 3, title: 'Why Vue is so fun' }
              ]
            }
         });

HTML:

v-for게시물을 반복해서 에 데이터를 전달할 것blog-post구성 요소

         <div id="blog-post-demo">
             <blog-post  v-for="post in posts"
                         v-bind:key="post.id"
                         v-bind:title="post.title"></blog-post>
         </div>

하위 구성 요소 이벤트 청취(하위 - 상위)

HTML

먼저 다음 날짜에 이벤트를 등록하십시오.v-on:enlarge-text="onEnlargeText"사용하다$emit케이스가 항상 낮아지도록 설정되었는지, 그렇지 않으면 제대로 작동하지 않는지 확인하십시오.예시enlargeText그리고Enlargetext언제나 로 전환될 것이다.enlargetext에 대한 간단한 설명을 위해 읽기 쉽고 유효하기 때문에 대신 확대 텍스트를 사용한다.$emit여기서 읽을 수 있다.

         <div id="blog-posts-events-demo">
            <div :style="{ fontSize: postFontSize + 'em' }">
                 <blog-post
                          v-for="post in posts"
                          v-bind:key="post.id"
                          v-bind:post="post"
                          v-on:enlarge-text="onEnlargeText"></blog-post>
            </div>
         </div>

VUE.JS

사용자가 클릭할 때button그v-on:click="$emit('enlarge-text')"그 다음 함수를 호출할 때 트리거onEnlargeText()

         //component (child)
         Vue.component('blog-post', {
             props: ['post'],
             template: `
              <div class="blog-post">
                 <h3>{{ post.title }}</h3>
                 <button v-on:click="$emit('enlarge-text')">
                     Enlarge text
                 </button>
                 <div v-html="post.content"></div>
             </div>`
         })

         //parent
         new Vue({
            el: '#blog-posts-events-demo',
            data: {
               posts: [
                    { id: 1, title: 'My journey with Vue' },
                    { id: 2, title: 'Blogging with Vue' },
                    { id: 3, title: 'Why Vue is so fun' }
               ],
            postFontSize: 1
         },
         methods:{
            onEnlargeText:function(){
               this.postFontSize++;
            }
          }
        })

사실 소품들은 형편없어 가끔 Jquyer에 있는 오래된 외부 도서관을 얻기도 해. 그리고 빌어먹을 패스 값이 필요해.99%의 시간 동안 소품을 사용하지만

A) 변수 B를 통과하기 위해 코드 톤을 디버그하는 데 수 많은 시간을 할애함) 한 줄 솔루션

데이터 letmeknow에서 {} 개체로 주

이.$뿌리letmeknow

컴포넌트의 코드 어딘가에서

이.$뿌리letmeknow = 이것;

그리고 boom 나는 컴포넌트 콘솔을 얻었다.$root.letmeknow ) 및 지금 확인하면 일부 값을 변경할 수 있음

참조URL: https://stackoverflow.com/questions/46584043/how-can-i-change-data-value-from-one-component-to-another-component-in-vue-js

'Programing' 카테고리의 다른 글

Vue.js의 URL에서 쿼리 매개 변수를 가져오는 방법 (0)	2022.03.18
OrderDict의 시작 부분에 요소를 추가하는 방법? (0)	2022.03.18
POST 요청을 보내는 방법? (0)	2022.03.18
Vue 앱(Vuetify.js 포함)에서 검증이 포함된 간단한 양식을 구현하는 방법 (0)	2022.03.18
Vue.js - 클래스를 수동으로 추가하지 않는 한 클래스를 기본적으로 적용하시겠습니까? (0)	2022.03.17

현재글Vue Js의 한 구성 요소에서 다른 구성 요소로 데이터 값을 변경하는 방법

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

c10106

Vue Js의 한 구성 요소에서 다른 구성 요소로 데이터 값을 변경하는 방법

Vue Js의 한 구성 요소에서 다른 구성 요소로 데이터 값을 변경하는 방법

'Programing' 카테고리의 다른 글

'Programing'의 다른글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

Vue Js의 한 구성 요소에서 다른 구성 요소로 데이터 값을 변경하는 방법

Vue Js의 한 구성 요소에서 다른 구성 요소로 데이터 값을 변경하는 방법

'Programing' 카테고리의 다른 글

'Programing'의 다른글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역