Vue의 하위 구성 요소는 상위 구성 요소의 값을 어떻게 얻나요? (소품 구현)-JS 튜토리얼-php.cn

Vue의 하위 구성 요소는 상위 구성 요소의 값을 어떻게 얻나요? (소품 구현)

不言

풀어 주다： 2018-07-23 14:13:42

원래의

32351명이 탐색했습니다.

Vue에서 상위 구성 요소의 데이터를 하위 구성 요소로 전송하는 방법은 무엇입니까? 구성 요소 인스턴스의 범위는 격리되어 있습니다. 이는 상위 구성 요소의 데이터를 하위 구성 요소의 템플릿 내에서 직접 참조할 수 없음을 의미합니다. 상위 컴포넌트의 데이터는 props를 통해 하위 컴포넌트로 전달되어야 합니다. 즉, props는 하위 구성요소가 상위 구성요소 데이터에 액세스하는 유일한 인터페이스입니다. 따라서 하위 구성 요소는 props를 사용하여 상위 구성 요소를 참조해야 합니다.

즉, props은 하위 구성 요소가 상위 구성 요소 데이터에 액세스할 수 있는 유일한 인터페이스입니다.

자세한 설명은 다음과 같습니다.

컴포넌트는 템플릿의 데이터를 직접 렌더링할 수 있습니다(이중 중괄호).

하위 구성 요소는 템플릿의 상위 요소 데이터를 직접 렌더링할 수 없습니다.

자식 구성 요소가 상위 요소의 데이터를 참조하려는 경우 prop에서 변수(예: a)를 선언하면 이 변수는 상위 요소의 데이터를 참조할 수 있습니다. 그런 다음 이 변수(이전 a)를 템플릿에 렌더링하고 이때 렌더링되는 것은 상위 요소의 데이터입니다.

1. 기본 사용법

그림과 같이:

    <p id="app1">
        <!-- hello引用父元素的hello，它也可以引用message,greet，world等 -->
        <child :hello=&#39;hello&#39;></child>
    </p>
    <script>
        var com1 = Vue.component(&#39;child&#39;,{
            // 声明在prop中的变量可以引用父元素的数据
            props:[&#39;hello&#39;],
           // 这里渲染props中声明的那个hello
            template:&#39;<p><p>{{ hello }}</p></p>&#39;,
        })

        var app1 = new Vue ({
            el: &#39;#app1&#39;,
            data: {
                greet: {
                    hello:&#39;hello,&#39;,
                    world: &#39;world&#39;,
                },
                message: &#39;message1&#39;,
            }
        })
    </script>

로그인 후 복사

2. js에서 카멜 케이스 이름 지정을 사용하고 대시 구분 기호로 바꿉니다. html 수식 명명

<!-- 在 HTML 中使用 kebab-case -->
<child my-message="hello!"></child>

<script>
    Vue.component(&#39;child&#39;, {
        // 在 JavaScript 中使用 camelCase
        props: [&#39;myMessage&#39;],
        template: &#39;<span>{{ myMessage }}</span>&#39;
    })
</script>

로그인 후 복사

3. 단방향 데이터 흐름: props는 단방향 바인딩입니다.

상위 구성 요소의 속성이 변경되면 하위 구성 요소로 전송되지만 그 반대는 아닙니다.

상위 구성 요소가 업데이트될 때마다 하위 구성 요소의 모든 소품이 최신 값으로 업데이트됩니다.

하위 구성 요소 내부의 소품을 변경하지 마세요. 이렇게 하면 Vue가 콘솔에 경고를 표시합니다.

두 가지 상황에서 우리는 prop의 데이터를 쉽게 수정하고 싶은 유혹을 받을 수 있습니다.

Prop이 초기 값으로 전달되고 하위 구성 요소는 이를 로컬 데이터로 사용하려고 합니다. 원시 데이터로 전달되어 하위 구성 요소에 의해 출력되는 다른 데이터로 처리됩니다.
이 두 가지 상황을 처리하는 올바른 방법은 다음과 같습니다.
지역 변수를 정의하고 prop의 값으로 초기화합니다.

    props: [&#39;initialCounter&#39;],
    data: function () {
      return { counter: this.initialCounter }
    }

로그인 후 복사

계산된 속성을 정의하고 prop의 값을 처리하고 반환합니다.

    props: [&#39;size&#39;],
    computed: {
      normalizedSize: function () {
        return this.size.trim().toLowerCase()
      }
    }

로그인 후 복사

참고: JavaScript에서 객체와 배열은 동일한 메모리 공간을 가리키는 참조 유형입니다. prop이 객체나 배열인 경우 하위 구성 요소 내에서 이를 변경하면 상위 구성 요소의 상태에 영향을 미칩니다.

예:

    <p id="app3">
        <my-component :object=&#39;object&#39;></my-component>
    </p>
    <script src="http://vuejs.org/js/vue.min.js"></script>
    <script>
        //
        var mycom = Vue.component(&#39;my-component&#39;, {
            //添加一个input改变子组件的childOject，那么父元素的object也会被改变，但是Vue没有报错！
            template: &#39;<p>{{ object.name }} is {{ object.age }} years old.<br><input v-model="childObject.name" type="text"></p>&#39;,
            props: [&#39;object&#39;,&#39;school&#39;],
            data: function () {
                // 子组件的childObject 和 父组件的object 指向同一个对象
                return {
                    childObject: this.object
                }
            }
        });
        var app3 = new Vue({
            el: &#39;#app3&#39;,
            data: {
                object:{
                    name: &#39;Xueying&#39;,
                    age: &#39;21&#39;,
                },
                school:&#39;SCUT&#39;,
            },
        })
    </script>

로그인 후 복사

Picture: childObject.name 변경, object.name도 변경됨