vuejs에서 prop은 무엇을 의미하나요?

vuejs에서 prop은 상위 구성 요소가 데이터를 전달하는 데 사용하는 사용자 정의 속성입니다. 하위 구성 요소는 props 옵션을 사용하여 "prop"를 명시적으로 선언해야 합니다. 문자열이 아닌 템플릿을 사용할 때 prop 이름 형식은 camelCase에서 kebab-case(대시로 구분)로 변환됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

1. Prop을 사용하여 데이터 전달

구성 요소 인스턴스의 범위는 격리됩니다. 즉, 상위 구성 요소의 데이터는 하위 구성 요소의 템플릿 내에서 직접 참조될 수 없고 참조되어서도 안 됩니다. 소품을 사용하여 하위 구성 요소에 데이터를 전달할 수 있습니다.
prop은 데이터를 전달하기 위해 상위 구성 요소에서 사용하는 사용자 정의 속성입니다. 하위 구성 요소는 props 옵션 props选项声明“prop”

Vue.component('child',{
    props:['message'],
    template:&#39;<span>{{ message }}</span>&#39;
})

然后向它传入一个普通字符串：

<child message="hello!"></child>

结果：

hello!

二、camelCase vs.kebab-case

html不区分大小写。当使用非字符串模板时，prop的名字形式会从camelCase转为kebab-case（短横线隔开）：

//camelCase
Vue.component('child',{
    props:['myMessage'],
    template:&#39;<span>{{ message }}</span>&#39;
})

//kebab-case
<child my-message="hello!"></child>

再次说明，如果你是用字符串模板，不用在意这些限制。

三、动态Prop

类似于用v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。

<div>
    <input v-model="parrentMsg">
    <br>
    <child v-bind:my-message="parrentMsg"></child>
</div>

使用v-bind的缩写语法通常更简单：

<child :my-message="parrentMsg"></child>

四、字面量语法vs动态语法

因为它是一个字面prop ，它的值以字符串 "1" 而不是以实际的数字传下去。如果想传递一个实际的 JavaScript 数字，需要使用 v-bind ，从而让它的值被当作 JavaScript 表达式计算：

五、单项数据流

prop是单项绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。同时，这也很好理解，父组件是子组件的高度抽象，表示子组件的共有部分，一个组件的数据改变并不会改变其抽象，然而其抽象的改变却代表着所有子组件的改变。
另外，每次组渐渐更新时，子组件的所有prop都会更新为最新值。这意味着你不应该在子组件内部改变prop。如果你这么做了，Vue会在控制台给出警告。
通常有两种改变prop的情况：

1.prop作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；

2.prop作为需要被转变的原始值传入。

更确切地说这两种情况是：
a.定义一个局部data属性，并将prop的初始值作为局部数据的初始值。

props: [‘initialCounter’], 
 data: function () { 
 return { counter: this.initialCounter} 
 }

    b.定义一个 computed 属性，此属性从 prop 的值计算得出。
   ```
    props: ['size'],
    computed: {
        normalizedSize: function () {
         return this.size.trim().toLowerCase()
     }
    }

六、Prop验证

组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告。当组件给其他人使用时这很有用。
prop 是一个对象而不是字符串数组时，它包含验证要求：

Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type可以是下面的原生构造器： 

* String 

* Number 

* Boolean 

* Function 

* Object 

* Array

type也可以是一个自定义构造器，使用instanceofrrreee

을 사용하여 "prop"를 명시적으로 선언한 다음 일반 문자열:

rrreee결과: rrreee

2. camelCase vs.kebab-case🎜🎜🎜html은 대소문자를 구분하지 않습니다. 문자열이 아닌 템플릿을 사용하는 경우 소품 이름 형식은 camelCase에서 kebab-case로 변환됩니다(대시로 구분). 🎜rrreeerrreee🎜다시 말하지만, 문자열 템플릿을 사용하는 경우 이러한 제한 사항에 대해 걱정하지 마세요. 🎜

🎜3개, 동적 Prop🎜🎜🎜v-bind를 사용하여 HTML 기능을 표현식에 바인딩하는 것과 유사하게 v-bind를 사용할 수도 있습니다. props 값을 상위 구성 요소의 데이터에 동적으로 바인딩합니다. 상위 구성 요소의 데이터가 변경될 때마다 변경 내용이 하위 구성 요소에도 전파됩니다. 🎜rrreee🎜약식 v-bind 구문을 사용하는 것이 일반적으로 더 간단합니다. 🎜rrreee

🎜4 리터럴 구문 vs 동적 구문🎜🎜🎜왜냐하면 값이 실제 숫자가 아닌 문자열 "1"로 전달되는 리터럴 prop입니다. 실제 JavaScript 숫자를 전달하려면 해당 값이 JavaScript 표현식으로 평가되도록 v-bind를 사용해야 합니다. 🎜🎜

🎜五, 단일 항목 데이터 흐름🎜🎜🎜prop은 단일 항목 바인딩입니다. 상위 구성 요소의 속성이 변경되면 하위 구성 요소로 전송되지만 그 반대는 아닙니다. 이는 하위 구성 요소가 상위 구성 요소의 상태를 실수로 수정하여 애플리케이션의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지하기 위한 것입니다. 동시에, 이는 이해하기 쉽습니다. 상위 구성 요소는 하위 구성 요소의 공통 부분을 나타내는 상위 수준 추상화입니다. 구성 요소의 데이터가 변경되더라도 추상화는 변경되지 않습니다. 그러나 추상화의 변경은 모든 하위 구성 요소의 변경을 나타냅니다. 🎜 또한 그룹이 점진적으로 업데이트될 때마다 하위 구성 요소의 모든 소품이 최신 값으로 업데이트됩니다. 즉, 하위 구성 요소 내부의 소품을 변경하면 안 됩니다. 이렇게 하면 Vue가 콘솔에 경고를 표시합니다. 🎜 일반적으로 prop을 변경하는 경우는 두 가지입니다. 🎜

1.prop가 전달됩니다. 하위 구성 요소는 초기 값으로 초기 값을 로컬 데이터의 초기 값으로 사용합니다.

2. prop은 변환해야 하는 원래 값으로 전달됩니다.

🎜보다 정확하게는 다음 두 가지 상황입니다. 🎜 a. 로컬 데이터 속성을 정의하고 prop의 초기 값을 로컬 데이터의 초기 값으로 사용합니다. 🎜🎜rrreeerrreee

6. Prop 검증🎜🎜구성요소는 prop에 대한 검증 요구 사항을 지정할 수 있습니다. Vue는 유효성 검사 요구 사항이 지정되지 않은 경우 경고를 표시합니다. 이는 해당 구성 요소를 다른 사람이 사용할 수 있도록 할 때 유용합니다. 🎜 prop이 문자열 배열이 아닌 객체인 경우 유효성 검사 요구 사항이 포함됩니다. 🎜rrreee🎜type은 다음 기본 생성자가 될 수 있습니다. 🎜🎜* 문자열 🎜🎜* 숫자 🎜🎜* 부울 🎜🎜 * 함수 🎜🎜* 객체 🎜🎜* Array🎜🎜type은 사용자 정의 생성자일 수도 있습니다. instanceof를 사용하여 감지하세요. 개발 버전을 사용하는 경우 소품 유효성 검사에 실패하면 경고가 표시됩니다. 🎜🎜관련 추천: "🎜vue.js Tutorial🎜"🎜

위 내용은 vuejs에서 prop은 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!