下你所需,载你所想!
IT技术源码资料下载网站

Vue父子组件参数传递原理说明

:其他软件 2020-09-08 07:55:18

Vue父子组件参数传递原理说明

props 是表示一个组件的参数部分,props 的写法有两种:
a 通过数组来定义
props:['myprop1','myprop2'...]
b 通过对象来定义
props:{
myName:{
type:String,
required:true,
default:'默认值'
}
}
2 代码
content.vue


<script>
export default {
name: "content",
/* 当前组件的属性列表 */
props:['myTitle']
}
</script>
<style scoped="" type="text/css">
</style>
App.vue


<script>
export default {
name: 'app',
data(){
return {
msg:'hello vue!'
}
}
}
</script>
<style type="text/css">
</style>
3 效果
二 组件之间的参数传递——子传父
1 原理说明
2 代码
content.vue


<script>
export default {
name: "content",
/* 第一种写法,通过数组来定义 */
// props:['myTitle']
/* 第二种写法,通过对象来定义 */
props: {
myTitle: {
type: String,
required: true,
default: "没传参数"
},
btnfn:{
type: Function
// FCfn(m) {
// this.msg = m
// }
}
}
}
</script>
<style scoped="" type="text/css">
</style>
App.vue


<script>
export default {
name: 'app',
data() {
return {
msg: '父组件传给子组件!!!'
}
},
methods: {
FCfn(m) {
this.msg = m
}
}
}
</script>
<style type="text/css">
</style>
3 效果
三 以事件发射的方式实现子传父
1 原理
在子组件中,使用 this.$emit("键","值")
在父组件中,子组件的标签中,使用 @键="msg=$event", 其中$event就能得到值,msg是父组件中 vue 属性。
2 代码
content.vue


<script>
export default {
name: "content",
/* 第一种写法,通过数组来定义 */
// props:['myTitle']
/* 第二种写法,通过对象来定义 */
props: {
myTitle: {
type: String,
required: true,
default: "没传参数"
},
btnfn:{
type: Function
// FCfn(m) {
// this.msg = m
// }
}
},
methods:{
doclick(){
this.$emit('newName','子组件内容')
}
}
}
</script>
<style scoped="" type="text/css">
</style>
App.vue


<script>
export default {
name: 'app',
data() {
return {
msg: '父组件传给子组件!!!'
}
},
methods: {
FCfn(m) {
this.msg = m
}
}
}
</script>
<style type="text/css">
</style>