Introduction to the use of Vue component option props

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

 

<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>

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

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

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

<!-- 传递了一个字符串 "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>

<!-- 传递实际的 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
 }
};

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

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

String
Number
Boolean
Function
Object
Array
Symbol

<p id="example">
 <parent></parent>
</p>
<script>
var childNode = {
 template: &#39;<p>{{message}}</p>&#39;,
 props:{
 &#39;message&#39;:Number
 }
}
var parentNode = {
 template: `
 <p class="parent">
 <child :message="msg"></child>
 </p>`,
 components: {
 &#39;child&#39;: childNode
 },
 data(){
 return{
 msg: &#39;123&#39;
 }
 }
};
// 创建根实例
new Vue({
 el: &#39;#example&#39;,
 components: {
 &#39;parent&#39;: parentNode
 }
})
</script>

var childNode = {
 template: &#39;<p>{{message}}</p>&#39;,
 props:{
 &#39;message&#39;:{
 validator: function (value) {
 return value > 10
 }
 }
 }
}

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

<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>

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

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