Simple understanding of the Props attribute in vue-JS Tutorial-php.cn

Simple understanding of the Props attribute in vue

高洛峰

Release： 2016-12-08 16:10:52

Original

1517 people have browsed it

The example in this article analyzes the properties of Props in Vue for your reference. The specific content is as follows

Use Props to transfer data

The scope of the component instance is isolated. This means that the parent component's data cannot and should not be referenced directly within the child component's template. You can use props to pass data to child components.

"prop" is a field of component data that is expected to be passed down from the parent component. Child components need to explicitly declare props with the props option:

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

Copy after login

and then pass it a normal string:

Example

Incorrect way of writing:

<!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 重复名称会出现错误

Copy after login

Correct way of writing:

<!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 重复名称会出现错误

Copy after login

props Passing in multiple data (sequence problem)

First type:

HTML

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

Copy after login

Result: hello! hello1! hello2!

Second:

HTML

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;
})

Copy after login

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

Copy after login

Result: 123hello! 123hello1! 123hello2!

The third type:

HTML

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;
})

Copy after login

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

Copy after login

Result: hello! 123 hello1! 12 3 hello2!123

Fourth:

HTML

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;
})

Copy after login

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

Copy after login

Result: hello! 123 123hello1! 123hello2!

Conclusion:

in props If multiple data is passed in, if it is in the template class of the parent component Adding other elements or characters will have:

1-Add at the front—each sub-component will be added in front of it when it is rendered. 2-Add at the end—each sub-component will be added at the end when it is rendered.

3 -Add in the middle - add it after the previous sub-component, add

after the latter sub-component