1.子元素接收数据,无校验
<div id="app"> 父亲给予:{{money}} <!--当前组件的属性=父级的值,给子元素加了一个childmoney属性,属性对应的数据时属于父亲的--> <child :childmoney="money"></child> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> //如果要在一个组件使用另一个组件,先保证使用的组件必须真实存在,在需要引用这个组件的实例上通过components注册这个组件,组件需要在父级的模板中通过标签的形式引用 let vm=new Vue({ el:'#app', data:{ money:200 }, components:{ child:{ props:['childmoney'],//如用数组,相当于this.childmoney=200,会在当前组件上声明一个childmoney属性,值是父元素的 templates:'<div>儿子接收 {{childmoney}} </div> ' } } }); </script>
2.子元素接收数据,有校验
<div id="app"> 父亲给予:{{money}} <!--当前组件的属性=父级的值,给子元素加了一个childmoney属性,属性对应的数据时属于父亲的--> <child :childmoney="money"></child> <--校验属性类型,如不带':'得到的是字符串类型,如带':',如 :childmoney='xxx',则在script中校验其类型 </div> <script src="node_modules/vue/dist/vue.js"></script> <script> //如果要在一个组件使用另一个组件,先保证使用的组件必须真实存在,在需要引用这个组件的实例上通过components注册这个组件,组件需要在父级的模板中通过标签的形式引用 let vm=new Vue({ el:'#app', data:{ money:200 }, components:{ child:{ props:{ childmoney:{ //属性名和data中的名字不能相同,校验时不能阻断代码的指向,只能警告而已。 type:[String, Function, Number, Object]//把childmoney定义为对象,并指定校验类型
//default:0 //可以给childmoney赋予默认值,如果不传会调用默认值。
required:true //此属性强制childmoney必须传递,但不能与default同时使用
validator(val){ //自定义校验器,第一个参数为当前传递的值,返回true表示通过
return val>300;
}
} }, template:'<div>儿子接收: {{childmoney}} </div> ' } } }); </script>
3.子元素向父元素传递数据:父元素先绑定事件,子元素触发这个事件,将参数传递过去(单向数据流,即父级数据刷新,可导致子元素数据刷新,子元素需要改数据,需先通知父级修改后刷新获取。)
<div id="app"> 父亲给予:{{money}} <!--当前组件的属性=父级的值,给子元素加了一个childmoney属性,属性对应的数据时属于父亲的--> <child :childmoney="money" @child-msg="changeMoney"></child> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> //如果要在一个组件使用另一个组件,先保证使用的组件必须真实存在,在需要引用这个组件的实例上通过components注册这个组件,组件需要在父级的模板中通过标签的形式引用 let vm=new Vue({ el:'#app', data:{ money:200 }, methods:{ changeMoney(val){ this.money=val; } }, components:{ child:{ props:{ childmoney:{ type:[String, Function, Number, Object] } }, template:'<div>儿子接收: {{childmoney}} <button @click="getMoney()" >再给点吧</button> </div> ', methods:{ getMoney(){ this.$emit('child-msg', 800); //触发自己的自定义事件,让父元素的方法执行。 } } } } }); </script>