©2016-2024 Matools All rights reserved,
粤ICP备17059708号
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head> <meta charset="UTF-8"> <title>Title</title> <script
src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div
id="prop-example-2"> <input v-model="parentMsg"> <br> <child
v-bind:my-message="parentMsg"></child> </div> <script> Vue.component('child',{
props:['myMessage'], template:'<span>{{ myMessage }}</span>' }) new Vue({
el:'#prop-example-2', data:{ parentMsg:'Messsssssssssssss' } }) </script>
</body> </html>
这里需要注意的是在html中的 my-message 就是scrpit中的 myMessage。因为：
HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case
(短横线分隔式命名)
热门工具 换一换