Vue.js0.1.2에서 사용된 Prop Binding Type

5843 단어 Vue.js

그래서 Vue.js0.12에서 등장하는 Prop Binding에 대해 대충 보고 싶습니다.만약 무슨 오해가 있으면 지적해 주십시오.

주의

본 보도는 제목과 같이 0.1.2를 따른다.0.12와 0.1.2 사이에 Pop binding의 사양(구문)이 변경되었습니다.
See: Release 0.12.1 · yyx990803/vue

원래 블루였는데.js로 말한 Prop

By default, components have isolated scope. This means you cannot reference parent data in a child component’s template. In order to pass data to child components with isolated scope, we need to use props .
요컨대 구성 요소 간에 가치를 교환하기 위한 구조이다.

Prop Binding Types

구성 요소 간에 작용 범위를 교환할 수 있다면

도'부'가 가진 속성을'자'에서 변경하고 싶다(이른바 Two-way binding)

"자"는 참고만 제공합니다.업데이트는'아버지'(One-way binding)만 가능

이런 생각.이걸 제어하는 건 0.12부터 등장하는 프롭 비딩 티페스다.

예제

이런 느낌의 화면이 있다면

<html>
    <head>
        <meta charset="UTF-8">
        <script src="vue-0.12.1/dist/vue.min.js"></script>
    </head>
    <body>
        <div id="demo">
            Parent: <input type="text" v-model="msg">
            <br>
            Child: <child msg="{{msg}}"></child> <!-- ここが変化します -->
        </div>
        <script>
         var demo = new Vue({
             el: '#demo',
             data: {
                 msg: 'Hello, World!'
             },

             components: {
                 child: {
                     props: ['msg'],
                     template: '<input type="text" v-model="msg">'
                 }
             }
         });
        </script>
    </body>
</html>