집 > 기사 > 웹 프론트엔드 > Vue의 부모-자식 컴포넌트, 부모-자식 컴포넌트 값 전달 및 vuex에 대한 간략한 분석

Vue의 부모-자식 컴포넌트, 부모-자식 컴포넌트 값 전달 및 vuex에 대한 간략한 분석

不言원래의: 2018-07-07 17:33:072824검색

이 글은 주로 Vue의 상위-하위 구성 요소와 vuex의 가치 전달에 대한 간략한 분석을 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

1. Vue의 상위-하위 구성요소 사이에 값이 어떻게 전달되나요? 우선, vue에는 양방향 바인딩이 있으므로 부모와 자식 구성 요소 간에 값 전송 문제가 있는 이유는 무엇입니까? 이 문제도 간단합니다. Vue 구성 요소는 다른 Vue 페이지에서 호출됩니다. 배열이 양방향으로 바인딩되면 혼동되기 쉽습니다. 예를 들어 페이지 a와 b는 num=10으로 바인딩됩니다. 페이지 b와 c가 서로 바인딩되어 있습니다. num=5가 연결되면 vue 인스턴스의 num은 누구의 말을 듣나요? 따라서 Vue 공식 웹사이트에서는 구성 요소 간 데이터가 단일 항목으로만 순환될 수 있으며 상위 구성 요소에서 하위 구성 요소로 전달된다고 명시되어 있습니다. 다음으로 상위 구성 요소와 하위 구성 요소가 어떻게 전달되는지는 말할 것도 없습니다. 가치를 전달하고, 아버지는 누구이고 아들은 누구입니까?
예제 1: 먼저 컴포넌트를 작성하고 son.vue라는 컴포넌트 폴더에 넣습니다(이름이 약간 스포일러입니다...)

<template>
  <p>
    <button class="test-btn" @click="add">+</button>
    <button class="test-btn" @click="minu">-</button>
    <p class="text-link">这里是son的num：{{num}}</p>
  </p>
</template>
<script>
export default {
  //props:["num"],//接收父组件传递过来的值，这里我先写上
  data () {
    return {
        num:0
    }
  },
   methods:{
       add(){//es6的语法相当于add:function(){}
           this.num++;
       },
       minu(){
           this.num--;
       }
   }
}
</script>

모든 사람이 이 son.vue 컴포넌트를 이해할 수 있다고 믿습니다. 수많은 컴포넌트를 더하고 빼세요. 다음으로 index.vue를 작성하여 son.vue

//index.vue
<template>
  <p>
    <son v-bind:num="num"></son>//传递一个值给son.vue，这时候可以把son.vue的props那个注释注销掉了
    <p class="text-link">这里是index的num：{{num}}</p>
  </p>
</template>
<script>
import son from './../components/son' 
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
     }
}
</script>

를 호출합니다. 이때 두 숫자는 모두 10입니다. 다시 덧셈, 뺄셈 버튼을 누르면 '아들의 num'은 계속 바뀌고, '인덱스의 num'은 항상 10인 것을 알 수 있습니다. 이것이 단일 항목의 데이터 순환입니다. 그렇다면 버튼을 클릭하고 '인덱스 수'를 어떻게 변경합니까? 이때 $emit이 작동해야 합니다.
index.vue

의 코드를 변경해야 합니다. 먼저:

<son v-bind:num="num" v-on:add="icr" v-on:minu="der"></son>//v-on:add="icr"就是绑定一个自定义事件

Add

methods:{
   icr(){
       this.num++;
   },
   der(){
       this.num--;
   }
}

그런 다음 son.vue에서 메서드는

methods:{
   add(){
       this.$emit("add");//$emit("add")就是触发父组件中的add方法
   },
   minu(){
       this.$emit("minu");
   }
}

가 됩니다. 따라서

$emit("xxx")는 상위 구성 요소를 트리거합니다. 함수 변경 부모 컴포넌트 데이터의 num 값, 부모 컴포넌트는 props를 통해 그 값을 자식 컴포넌트에 전달합니다. 이를 통해 데이터 전송 및 상위-하위 구성요소 통신

이 가능합니다.

son.vue와 index.vue의 전체 코드입니다

//son.vue
<template>
<p>
    <button class="test-btn" @click="add">+</button>
    <button class="test-btn" @click="minu">-</button>
    <p class="text-link">这里是{{num}}</p>
</p>
</template>
<script>
export default {
  props:["num"],
  data () {
    return {
        num:10
    }
  },
   methods:{
       add(){
           this.$emit("add");
       },
       minu(){
           this.$emit("minu");
       }
   }
}
</script>

//index.vue
<template>
 <p>
    <son v-bind:num="num" v-on:add="icr" v-on:minu="der"></son>
    <p class="text-link">父{{num}}</p>
</p>
</template>
<script>
import son from './../components/son'
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
   },
   methods:{
       icr(){
           this.num++;
       },
       der(){
           this.num--;
       }
   }
}
</script>

둘째, vuex와 그 상태, 액션, 게터, 뮤테이션, 모듈, 스토어에 대해 이야기해 보겠습니다
우선 vuex 공식 웹사이트에는 다음과 같이 나와 있습니다. Vue 상태 관리 도구. 상태는 이해하기 어려울 수 있습니다. 단순히 vue의 데이터에 있는 변수로 상태를 이해하면 됩니다. 구성 요소 간의 데이터 변수 관계가 복잡해지면 해당 변수를 추출하여 관리합니다. 위의 내용을 보면 상위 구성 요소와 하위 구성 요소 간의 num 간 통신이 더 문제가 있는지 확인할 수 있습니다. 데이터를 변경하려면 $emit를 사용해야 합니다. 창고처럼 num 값을 저장해 두는 곳이 있고, 그걸 사용하고 싶은 사람이 num 값을 요청하고, 그걸 바꾸고 싶은 사람이 바꿀 수 있으면 참 좋겠죠? 그것은 전역 변수와 약간 비슷합니다. 구성 요소를 구하거나 변경해야 할 사항이 있으면 그에게 올 수 있습니다.

1. 우선, 창고와 마찬가지로 상태가 유일한 데이터 캐리어입니다. 2. 돌연변이는 상태 값을 변경하고 커밋 등을 사용할 수 있는 유일한 것입니다. 이 두 가지는 vuex에 있어 가장 기본이자 필수 불가결한 것입니다. 간단한 vuex 관리를 위해서는 이 두 가지를 사용하면 됩니다. vuex를 사용하는 방법은 무엇입니까? https://segmentfault.com/a/11...
3을 참조하세요. getter에 대한 공식적인 설명: 새로운 상태를 파생하는 것은 이해하기 어렵습니다. 쉽게 말하면

필터링과 조합입니다!

예를 들어, 상태에 저장된 배열이 있고 배열에 많은 데이터 조각이 포함되어 있고 상태가 0인 데이터만 사용하려는 경우 getter를 사용할 수 있습니다. 약간의 필터링을 의미하지 않습니까? 따라서 getter는 때때로 유용하고 필요합니다! .
4. 돌연변이를 제출하는 데 작업이 사용됩니다. 왜 그렇게 불필요하게 느껴지나요! 사실 아니요. 이 작업에서 가장 중요한 점은 비동기 작업을 포함할 수 있다는 것입니다. 비동기식으로 작동하는 방법은 많은 상황에서 사용하지 않을 수 있으므로 설명하지 않겠습니다.
5. 모듈도 보조 방법입니다. 예를 들어, 모듈A에는 완전한 상태, 작업, 게터 및 변형이 있고, 모듈B에는 완전한 상태, 작업, 게터 및 변형이 있을 수도 있습니다. 혼란을 피하기 위해 저장소를 모듈로 나눕니다. 알겠습니다. 오늘은 여기까지입니다. 공식 웹사이트 문서를 더 읽고 더 많이 연습해야 합니다. 여러분 모두의 지도를 부탁드립니다! 배움이 정말 어렵습니다. 지도해주세요...

마지막으로 글이 도움이 되셨다면 별점 부탁드립니다. . . 우우

</template>
<script>
import son from './../components/son'
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
   },
   methods:{
       icr(){
           this.num++;
       },
       der(){
           this.num--;
       }
   }
}
</script>

二、说说vuex以及他的state、actions、getters、mutations、modules、store
首先，vuex官网上说是一个vue的状态管理工具。可能状态比较难理解，大家可以简单地把状态理解成为vue的data里面的变量。当组件之间的data变量关系复杂一点的时候，就把其中的变量抽离出来管理。刚好大家可以看看上面，父子组件之间的num之间的通信是不是比较麻烦，改变数据还要用$emit。如果有一个地方跟仓库一样就存放着num的值，谁要用谁去请求num的值，谁想改就改该多好是吧，vuex就是干这个的，有点全局变量的意思。任何组件需要拿，改东西，都可以找他。

1、首先state是惟一的数据载体，跟仓库一样。
2、而mutations是唯一可以改变state的值的东东，使用commit等。
这两个是vuex最最基础缺一不可的。简单的vuex管理就使用这两个就行，如何使用vuex？看这里https://segmentfault.com/a/11...
3、getters的官方说明：派生出新的状态，这个比较难理解。简单来说，就是过滤，组合！
比如说state里面存了一个数组，数组有好多个数据，而我只想要用status：0的那些个，就可以用getters。是不是有点过滤的意思。所以getters有时候还很好用，很必要！。
4、actions是用来提交mutations，wtf？怎么感觉那么多余！其实不是的，这个actions最重要的是可以包含异步操作。如何异步操作就不演示了，因为大家可能很多情况都不会使用它。
5、modules也是辅助方法。比如modulesA有一个完整的state、actions、getters、mutations；modulesB也可以有一个完整的state、actions、getters、mutations，他就是将store分割成模块，避免混淆。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

Vue의 부모-자식 컴포넌트, 부모-자식 컴포넌트 값 전달 및 vuex에 대한 간략한 분석

관련 기사