<!DOCTYPE html> <!--suppress ALL --> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 需求: 让父组件和子组件里面的num随着input输入一起变 --> <!-- 也就是先父组件传到子组件,然后子组件再传到父组件 --> <div id="app"> <!-- 注意这里的两次绑定 --> <cpn :number1="num1" @num1change="num1change"></cpn> </div> <template id="cpn"> <div> <h2>父组件(全局组件):{{number1}}</h2> <h2>子组件(局部组件):{{dnumber1}}</h2> <!-- 将子组件的属性和这里input双向绑定 --> <input type="text" :value="dnumber1" @input="num1Input"> </div> </template> <script src="../vue.js"></script> <script> const app = new Vue({ // 父组件 el: '#app', data: { num1:1, num2:0 }, methods: { // 这里是让父组件的num改变的事件 num1change(value){ this.num1 = parseFloat(value), } }, components:{ // 子组件 cpn:{ template: '#cpn', // 确认传递过来的类型 props: { number1:Number, }, // 这里用data保存父组件传过来的数据 data(){ return { dnumber1: this.number1, } }, methods: { num1Input(event){ // 将input中value赋值到的dnumber1中 this.dnumber1 = event.target.value; // 为了让父组件可以修改值,发出一个事件 this.$emit('num1change', this.dnumber1); } } } } }) </script> </body> </html>