<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- div中的title属性绑定了data的msg,v-bind,以v-开头的就成为指令,其绑定属性与实例保持一致 --> <div id="hyy"> <compomenta :label='message' placeholder="test" def="message"></compomenta> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> Vue.component("compomenta",{ props: ['label'], template:'<div><input v-bind:value="label" def="haha"><p>{{label}}</p></div>', }) var test = new Vue({ el: "#hyy", data: { // stime:"",//开始时间 message:"label222", test:"lllll" }, }) </script> </body> </html>