vue의 Props 속성에 대한 간단한 이해-JS 튜토리얼-php.cn

vue의 Props 속성에 대한 간단한 이해

高洛峰

풀어 주다： 2016-12-08 16:10:52

원래의

1491명이 탐색했습니다.

이 글의 예시는 참고용으로 Vue에서 Props의 속성을 분석한 것입니다. 구체적인 내용은 다음과 같습니다

Prop를 사용하여 데이터를 전송합니다

컴포넌트 인스턴스의 범위는 격리되어 있습니다. . 즉, 상위 구성 요소의 데이터는 하위 구성 요소의 템플릿 내에서 직접 참조될 수 없고 참조되어서도 안 됩니다. 소품을 사용하여 하위 구성 요소에 데이터를 전달할 수 있습니다.

"prop"는 상위 구성 요소에서 전달될 것으로 예상되는 구성 요소 데이터 필드입니다. 하위 구성 요소는 props 옵션(

Vue.component(&#39;child&#39;, {
 // 声明 props
 props: [&#39;msg&#39;],
 // prop 可以用在模板内
 // 可以用 `this.msg` 设置
 template: &#39;<span>{{ msg }}</span>&#39;
})

로그인 후 복사

)을 사용하여 props를 명시적으로 선언한 다음 일반 문자열(

<)을 전달해야 합니다. ;child msg="hello!">

예

잘못된 표기:

<!DOCTYPE html>
<html lang="en">
 
<head>
 <script type="text/javascript" src="./vue.js"></script>
 <meta charset="UTF-8">
 <title>vue.js</title>
</head>
 
<body>
<pre class="brush:php;toolbar:false">
 //使用 props 传输资料予子组件
 //props , data 重复名称会出现错误

로그인 후 복사

정확한 표기:

<!DOCTYPE html>
<html lang="en">
 
<head>
 <script type="text/javascript" src="./vue.js"></script>
 <meta charset="UTF-8">
 <title>vue.js</title>
</head>
 
<body>
<pre class="brush:php;toolbar:false">
 //使用 props 传输资料予子组件
 //props , data 重复名称会出现错误

로그인 후 복사

props가 여러 데이터를 전달하는 경우(순서 문제)

첫 번째 유형:

HTML

<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
<child nisha="hello2!"></child>
</div>

로그인 후 복사

Vue.config.debug = true;
Vue.component(&#39;child&#39;, {
// declare the props
props: [&#39;msg&#39;,&#39;nihao&#39;,&#39;nisha&#39;],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: &#39;<span>{{ msg }}{{nihao}}{{nisha}}</span>&#39;,
/*data: function() {
return {
 msg: &#39;boy&#39;
}
}*/
});
var vm = new Vue({
el: &#39;#app1&#39;
})

로그인 후 복사

결과: hello! hello1! hello2!

두 번째:

HTML

<div id="app1">
<child msg="hello!"></child>
 <child nihao="hello1!"></child>
 <child nisha="hello2!"></child>
</div>

로그인 후 복사

Vue.config.debug = true;
Vue.component(&#39;child&#39;, {
// declare the props
props: [&#39;msg&#39;,&#39;nihao&#39;,&#39;nisha&#39;],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: &#39;<span>123{{ msg }}{{nihao}}{{nisha}}</span>&#39;,
/*data: function() {
return {
 msg: &#39;boy&#39;
}
}*/
});
var vm = new Vue({
el: &#39;#app1&#39;
})

로그인 후 복사

결과: 123hello! 123hello1!

세 번째 유형:

HTML

<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
 <child nisha="hello2!"></child>
</div>

로그인 후 복사

Vue.config.debug = true;
Vue.component(&#39;child&#39;, {
// declare the props
props: [&#39;msg&#39;,&#39;nihao&#39;,&#39;nisha&#39;],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: &#39;<span>{{ msg }}{{nihao}}{{nisha}}123</span>&#39;,
/*data: function() {
return {
 msg: &#39;boy&#39;
}
}*/
});
var vm = new Vue({
el: &#39;#app1&#39;
})

로그인 후 복사

결과: hello! 123 hello1! 123 hello2!123

네 번째 유형:

HTML 🎜>

<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
<child nisha="hello2!"></child>
</div>

로그인 후 복사

Vue.config.debug = true;
Vue.component(&#39;child&#39;, {
// declare the props
props: [&#39;msg&#39;,&#39;nihao&#39;,&#39;nisha&#39;],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: &#39;<span>{{ msg }}123{{nihao}}{{nisha}}123</span>&#39;,
/*data: function() {
return {
 msg: &#39;boy&#39;
}
}*/
});
var vm = new Vue({
el: &#39;#app1&#39;
})

로그인 후 복사

결과: hello! 123hello1! 123hello2!

결론:

데이터는 props로 전달되며, 상위 구성 요소의 템플릿 클래스에 다른 요소나 문자를 추가하면 다음과 같이 됩니다.

1-앞에 추가 — 각 하위 구성 요소가 렌더링되면

2-마지막에 추가합니다. 각 하위 구성 요소가 렌더링되면 그 뒤에

가 추가됩니다. 3-중간에 추가합니다. 구성 요소 뒤에 추가하고, 후속 하위 구성 요소 뒤에

을 추가합니다.