父组件向子组件传值
- 应用props 形式传值，父组件援用组件，应用组件后，可通过子组件内定义的 props 属性，
应用该属性名传值到子组件内; - props 能够传入String,Number,Object,Boolean,Array数据类型;
- prop 验证：设置required 参数 可抉择是否以后属性必传;
- default 设置如若不传将展现的内容;
- props 传值为单向数据流;
留神:子组件内不能间接批改父组件传来的props；、;
创立父组件
<template> <div class="root"> <h1>this is father</h1> <show-name :first-name="nick_name" last-name="jack" /> </div></template><script>import showName from './children'export default{ components:{ showName, }, data(){ return{ nick_name:'Tom' } }}</script>创立子组件
<template> <div class="root"> this is children <p>{{first-name}}</p> <p>{{last-name}}</p> </div></template><script>export default{ props:{ 'first-name':{ type:String, required:true, }, 'last-name':{ type:String, default:'Jack' } }, data(){ return{ } }}</script>子组件向父组件传值
- 子组件向父组件传值，不能间接实时传递数据，必须通过事件触发。
- 通过 $emit 办法 实现父子间通信；
Father
<template> <div class="root"> <h1>this is father</h1> parent: 这是我的子组件传给我的值{{num}} <show-name :first-name="nick_name" last-name="jack" @getNum="getValue" /> </div></template><script>import showName from './children'export default{ components:{ showName, }, data(){ return{ nick_name:'Tom', num:'' } }, methods:{ getValue(val){ this.num=val; } }}</script>Child
<template> <div class="root"> this is children <p>{{first-name}}</p> <p>{{last-name}}</p> <button @click="sendValue">点击向父组件发送音讯</button> </div></template><script>export default{ props:{ 'first-name':{ type:String, required:true, }, 'last-name':{ type:String, default:'Jack' } }, data(){ return{ num:0 } }, methods:{ sendValue(){ this.$emit('getNum',this.num++); } }}</script>