Vue 컴포넌트 옵션 소품 사용 소개

이 글은 주로 Vue 컴포넌트 옵션 props의 사용을 소개합니다. 어느 정도 참고할만한 가치가 있어서 공유합니다. 필요한 친구들이 참고할 수 있습니다.

부모 컴포넌트는 props를 사용합니다. 자식 컴포넌트에 데이터를 전달하고, 자식 컴포넌트는 이벤트를 통해 부모 컴포넌트에 메시지를 보냅니다. 이번 글에서는 Vue 컴포넌트 옵션 소품에 대해 자세히 소개하겠습니다. 필요한 친구들은 앞의 말을 참고하시면 됩니다

컴포넌트 허용되는 대부분의 옵션은 Vue 인스턴스와 동일하며 옵션 props는 컴포넌트에서 매우 중요한 옵션입니다. Vue에서 상위 컴포넌트와 하위 컴포넌트 간의 관계는 props down, events up으로 요약될 수 있습니다. 상위 컴포넌트는 props를 통해 하위 컴포넌트에 데이터를 전달하고, 하위 컴포넌트는 이벤트를 통해 상위 컴포넌트에 메시지를 보냅니다. 이번 글에서는 Vue 컴포넌트 옵션 props를 자세히 소개하겠습니다.

컴포넌트 인스턴스의 범위는 격리되어 있습니다. 즉, 하위 구성 요소의 템플릿 내에서 상위 구성 요소의 데이터를 직접 참조할 수 없으며 참조해서는 안 됩니다. 하위 컴포넌트가 상위 컴포넌트의 데이터를 사용하게 하려면 하위 컴포넌트의 props 옵션을 전달해야 합니다

Prop을 사용하여 데이터를 전송하는 데에는 정적 및 동적 형식이 포함됩니다#. 🎜🎜#

하위 구성 요소는 명시적으로 props 옵션을 사용하여 획득할 것으로 예상되는 데이터를 선언해야 합니다. Prop은 상위 구성 요소의 하위 구성 요소에 전달됩니다. 자리 표시자에 속성을 추가하는 방법은 값 전달 목적을 달성하는 것입니다. 🎜🎜#

props로 선언된 속성의 경우 상위 HTML 템플릿에서 속성 이름은 밑줄로 작성해야 합니다.

var childNode = {
 template: &#39;<p>{{message}}</p>&#39;,
 props:[&#39;message&#39;]
}

#🎜 🎜#

하위 props 속성을 선언할 때 카멜 표기법이나 밑줄을 사용할 수 있습니다. ; 하위 템플릿이 상위 항목에서 전달된 변수를 사용하는 경우 해당 카멜 표기법을 사용해야 합니다.

# 🎜🎜#

 

<script>
var childNode = {
 template: &amp;#39;&lt;p&gt;{{message}}&lt;/p&gt;&amp;#39;,
 props:[&amp;#39;message&amp;#39;]
}
var parentNode = {
 template: `
 <p class="parent">
 <child message="aaa"></child>
 <child message="bbb"></child>
 </p>`,
 components: {
 &#39;child&#39;: childNode
 }
};
// 创建根实例
new Vue({
 el: &#39;#example&#39;,
 components: {
 &#39;parent&#39;: parentNode
 }
})
</script>

#🎜🎜 #

dynamic props

템플릿에서는 동적으로 다음을 수행해야 합니다. 상위 구성 요소의 데이터를 하위 템플릿의 소품에 바인딩하고 이를 일반 HTML에 바인딩합니다. 기능은 비슷합니다. v-bind를 사용하면 됩니다. 상위 구성 요소의 데이터가 변경될 때마다 변경 사항이 하위 구성 요소에도 전송됩니다. 숫자

var parentNode = {
 template: `
 <p class="parent">
 <child my-message="aaa"></child>
 <child my-message="bbb"></child>
 </p>`,
 components: {
 &#39;child&#39;: childNode
 }
};

# 🎜🎜#

리터럴 prop이므로 값은 문자열입니다. 숫자 대신 "1". 실제 숫자를 전달하려면 해당 값이 JS 표현식으로 평가되도록 v-bind를 사용해야 합니다. #

또는 동적 prop을 사용하여 해당 숫자를 설정할 수 있습니다. 데이터 속성의 1

var childNode = {
 template: &#39;<p>{{myMessage}}</p>&#39;,
 props:[&#39;myMessage&#39;]
}
var childNode = {
 template: &#39;<p>{{myMessage}}</p>&#39;,
 props:[&#39;my-message&#39;]
}

# 구성 요소 소품에 대한 유효성 검사 사양을 지정할 수 있습니다. Vue는 들어오는 데이터가 사양을 충족하지 않으면 경고를 발행합니다. 이는 다른 사람이 구성 요소를 사용할 때 유용합니다. 유효성 검사 사양을 지정하려면 문자열 배열이 아닌 객체를 사용해야 합니다. 🎜🎜#

유형은 다음과 같은 기본 생성자일 수 있습니다.

var childNode = {
 template: &#39;<p>{{myMessage}}</p>&#39;,
 props:[&#39;myMessage&#39;]
}
var parentNode = {
 template: `
 <p class="parent">
 <child :my-message="data1"></child>
 <child :my-message="data2"></child>
 </p>`,
 components: {
 &#39;child&#39;: childNode
 },
 data(){
 return {
 &#39;data1&#39;:&#39;aaa&#39;,
 &#39;data2&#39;:&#39;bbb&#39;
 }
 }
};

유형은 사용자 정의 생성자 함수일 수도 있습니다. 감지 인스턴스를 사용하세요.

prop 검증이 실패하면 Vue는 경고를 표시합니다(개발 버전을 사용하는 경우). Props는 컴포넌트 인스턴스가 생성되기 전에 검증되기 때문에 default나 validator 함수에서는 data, Computed, Method 등의 인스턴스 속성을 사용할 수 없습니다.

　다음은 하위 컴포넌트인 경우 간단한 예시입니다. 메시지가 숫자가 아닌 경우 경고가 발생합니다

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>
<p id="example">
 <my-parent></my-parent>
</p>
<script>
var childNode = {
 template: &#39;<p>{{myMessage}}的类型是{{type}}</p>&#39;,
 props:[&#39;myMessage&#39;],
 computed:{
 type(){
 return typeof this.myMessage
 }
 }
}
var parentNode = {
 template: `
 <p class="parent">
 <my-child my-message="1"></my-child>
 </p>`,
 components: {
 &#39;myChild&#39;: childNode
 }
};
// 创建根实例
new Vue({
 el: &#39;#example&#39;,
 components: {
 &#39;MyParent&#39;: parentNode
 }
})
</script>

숫자 123이 전달되면 경고는 없을 것입니다. 문자열 '123'이 전달되면 결과는 다음과 같습니다.

위 코드에서 하위 구성 요소의 내용을 다음과 같이 수정하여 확인 함수, 함수가 false를 반환하면 경고 메시지

<!-- 传递实际的 number -->
<comp v-bind:some-prop="1"></comp>
var parentNode = {
 template: `
 <p class="parent">
 <my-child :my-message="1"></my-child>
 </p>`,
 components: {
 &#39;myChild&#39;: childNode
 }
};

이 전달됩니다. 상위 구성 요소에 전달된 msg 값은 다음과 같습니다. 1, 10보다 작으므로 경고 프롬프트

var parentNode = {
 template: `
 <p class="parent">
 <my-child :my-message="data"></my-child>
 </p>`,
 components: {
 &#39;myChild&#39;: childNode
 },
 data(){
 return {
 &#39;data&#39;: 1
 }
 }
};

单向数据流

　　prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解

　　另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告

　　下面是一个典型例子

<p id="example">
 <parent></parent>
</p>
<script>
var childNode = {
 template: `
 <p class="child">
 <p>
 <span>子组件数据</span>
 <input v-model="childMsg">
 </p>
 <p>{{childMsg}}</p>
 </p>
 `,
 props:[&#39;childMsg&#39;]
}
var parentNode = {
 template: `
 <p class="parent">
 <p>
 <span>父组件数据</span>
 <input v-model="msg">
 </p>
 <p>{{msg}}</p>
 <child :child-msg="msg"></child>
 </p>
 `,
 components: {
 &#39;child&#39;: childNode
 },
 data(){
 return {
 &#39;msg&#39;:&#39;match&#39;
 }
 }
};
// 创建根实例
new Vue({
 el: &#39;#example&#39;,
 components: {
 &#39;parent&#39;: parentNode
 }
})
</script>

　　父组件数据变化时，子组件数据会相应变化；而子组件数据变化时，父组件数据不变，并在控制台显示警告

　　修改prop中的数据，通常有以下两种原因

　　1、prop 作为初始值传入后，子组件想把它当作局部数据来用

　　2、prop 作为初始值传入，由子组件处理成其它数据输出

　　对于这两种情况，正确的应对方式是

　　1、定义一个局部变量，并用 prop 的值初始化它

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

　　2、定义一个计算属性，处理 prop 的值并返回

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

　　[注意]JS中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态

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

相关推荐：

Vue.js通用应用框架-Nuxt.js的解析

关于vue.js简单配置axios的方法介绍

위 내용은 Vue 컴포넌트 옵션 소품 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!