Vue.js는 라우터 뷰를 통해 전달된 데이터를 브라우저의 devtools에서 볼 수 있어야 하는가?

Vue.js는 라우터 뷰를 통해 전달된 데이터를 브라우저의 devtools에서 볼 수 있어야 하는가?

라우터 뷰 구성요소에 다음과 같이 몇 가지 소품을 전달한다.

<router-view :zipchange="zipchange" :accountitems="accountitems" :accountloaded="accountloaded" :profilepic="profilepic" />

브라우저 개발 도구의 요소를 검사할 때 각 경로/페이지의 최상위 div에 연결된 모든 데이터가 이렇게 표시되어야 하는가?다른 소품 없음(전송되지 않은 소품)router-view구성 요소)가 이러한 방식으로 표시됨...

그 외관상의 예는 다음과 같다.

이것은 예상된 행동이다.라우터 뷰에 소품을 전달하면 소품 값도 속성으로 구성 요소의 루트 요소에 추가된다.

소품을 속성으로 추가하지 않으려면 전달된 인수에 수식어를 사용해야 한다.v-bind:

<router-view 
  :zipchange.prop="zipchange" 
  :accountitems.prop="accountitems" 
  :accountloaded.prop="accountloaded" 
  :profilepic.prop="profilepic" 
/>

이것은 그 속성 대신 DOM 요소의 속성에서 프로펠러 값을 바인딩할 것이다.

이런 추악한 속성을 숨길 방법을 찾았어어린이용 노선에 소켓을 반드시 포함시켜야 한다. 그렇지 않으면 위와 같이 div에 주입될 것이다.나는 그 정보가 내가 소품을 정의한 페이지에 있는 것이 아니라, 그렇지 않은 페이지에만 있다는 것을 알았다.예를 들어, 내 "Dashboard.vue" 페이지에서 다음과 같이 소품을 추가하면:

export default {
  name: 'dash',
  props: ['profilepic'], //<- This must be present on the child
  components: {
    mycomps
  },
  data () {
    return {
      dataitem: somvalue,
// ETC

추한 자는 없어질 것이다.이게 다른 사람에게 도움이 되길 바래

참조URL: https://stackoverflow.com/questions/46229141/vue-js-should-prop-data-passed-on-router-view-be-visible-in-devtools-in-browsers