点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 千木教程(qianmu.net)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <qianmu-input v-model="num"></qianmu-input> <p>输入的数字为:{{num}}</p> </div> <script> Vue.component('qianmu-input', { template: ` <p> <!-- 包含了名为 input 的事件 --> <input ref="input" :value="value" @input="$emit('input', $event.target.value)" > </p> `, props: ['value'], // 名为 value 的 prop }) new Vue({ el: '#app', data: { num: 100, } }) </script> </body> </html>
运行结果
