<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script> //组件之间的通讯 ，1，父与子 2，子与父 3，兄弟之间 // 父亲传递儿子，默认组件是独立的，相互不能引用数据，可以通过属性方式传递给儿子 let vm=new Vue({ el:"#app", //根实例上的data都是对象，组件中的都是函数 data:{ money:100 }, //父级传递给子集数据通过绑定属性,如果传递多个可以数组中写多个 //如果传递的是boolean或这个数组需要加: //template会替代div，id为app的标签 template:'<div><child :m="money" o="美女"></child></div>', components: { child: { //子集接收给父级给的数据，通过props属性接收 props: { //规定传递过来的m是不符合数组里面类型，也会渲染页面上，只是提示 m: { type: [Number, Boolean, Array, String], // default:'500' //默认值，如果父级没有传递时候，会采用默认值 required: true ////必须传递 不能和default同时引用 }, o: { type: String, //自定义校验器 validator(val) { //val代表o属性传递过来的值 return val === '美女'; } } }, computed: { b() { //这里的this指向子集child //父亲的数据儿子不能更改 错误写法 this.o="丑呀" return "大大" + this.o; } }, template: "<div>儿子 {{m}} {{b}}</div>" } } }); </script> </html>