: :其他软件 2020-09-08 07:55:18
props 是表示一个组件的参数部分,props 的写法有两种:
a 通过数组来定义
props:['myprop1','myprop2'...]
b 通过对象来定义
props:{
myName:{
type:String,
required:true,
default:'默认值'
}
}
2 代码
content.vue
商品列表...
{{myTitle}}
<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
商品列表...
{{myTitle}}
<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
商品列表...
{{myTitle}}
<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>
TAG: Vue,父子组件,参数,传递
10-10获取进程间通信的参数
10-05SVM分类器与超参数优化
10-03MFC6.0 开发的窗口参数捕获工具
11-19Excel表示条件参数的逻辑值求反方法
11-10vb6.0生成exe程序实现返回参数功能
11-01PDF文件指定参数制作注释副本