标签：vue name default 绑定 传递 事件 组件 type

1.props 父传子

传递方式：父组件引入及使用子组件时，在组件标签上使用数据绑定方式传递数据

例：<people :name='name' :age='age' :desc='desc'></people>

接收方式：

props:{
desc:{
type:String, //参数类型
required:true, //是否未必传参数
default:'lovely'
},
name:{
type:String,
default:'xiaomei' //默认值，没传就用此值
},
age:{
type:Number,
validator(value){
//属性校验，如果约束和属性校验出现和配置不一样的情况就会有报错提示
return value >= 0
}
},
arr:{
type:Array,
default:() => [1,2,3] //数组或对象默认值需要用函数设置
}
}

2.子组件绑定一个事件，通过 this.$emit() 来触发

（1）在子组件中绑定一个事件，并给这个事件定义一个函数

// 子组件
<button @click="changeParentName">改变父组件的name</button>
​
export default {
methods: {
//子组件的事件
changeParentName: function() {
this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
// 注：此处事件名称与父组件中绑定的事件名称要一致
}
}
}

（2）在父组件中定义并绑定 handleChange 事件

// 父组件
<child @handleChange="changeName"></child>
​
methods: {
changeName(name) { // name形参是子组件中传入的值Jack
this.name = name
}
}

标签：vue,name,default,绑定,传递,事件,组件,type
来源： https://www.cnblogs.com/wmx1/p/16263618.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。