<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prop練習</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<my-component
title="這是title"
:likes="likes"
isPublished=true
commentIds="[1,2,3,4]"
:author="author"
:callback="callback">
</my-component>
<br>
<hr>
<p>
使用v-bind不帶名稱的方式，將整個對象傳遞到prop中
</p>
<my-component v-bind="myObj">
</div>
</div>
<template id="subtemplate">
<div>
<p>title:{{title}}</p>
<p>likes:{{likes}}</p>
<p>isPublished:{{isPublished}}</p>
<p>commentIds:{{commentIds}}</p>
<p>author:{{author}}</p>
<p>callback:{{callback}}</p>
<p>contactsPromise:{{contactsPromise}}</p>
</div>
</template>
<script>
const vm=new Vue({
el:"#app",
data(){
return {
likes:1,
author:{key:1,value:2},
myObj:{
title:"myObjTitle",
likes:1,
isPublished:false,
commentIds:[1,2,3,4,5],
author:{a:1,b:2},
}
}
},
methods:{
callback(){
console.log("callback function ");
}
},
computed:{
},
components:{
MyComponent:{
template:"#subtemplate",
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
}
}
})
</script>
</body>
</html>
官方文檔：
https://v2.cn.vuejs.org/v2/guide/components-props.html
