Home > Article > Web Front-end > Simple understanding of the Props attribute in vue

Simple understanding of the Props attribute in vue

高洛峰Original: 2016-12-08 16:10:521451browse

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

and then pass it a normal string:

914bfc256b255241d41492f651d390d27d4dd9c7239aac360e401efe89cbb393

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

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

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>

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

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

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

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

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

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

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use js to control the scroll bar of a div so that it automatically scrolls to the bottom when the content is updatedNext article：How to use js to control the scroll bar of a div so that it automatically scrolls to the bottom when the content is updated

See more

Simple understanding of the Props attribute in vue

Related articles