马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
×
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> rop練習</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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金 |
发表于 2026-2-19 11:48:11