前端-Vue基础3（父子组件交互）
2024-10-10 09:55:51
1、子组件往父组件传值
点击子组件的值，子组件自增，父组件的值也跟着自增
通过：this.$emit('change')方法向父组件暴露事件，在子组件中引用，可以调用父组件的方法
点击子组件触发click事件，调用子组件的add方法
子组件的add方法触发了父组件的事件，调用了父组件的changeAdd方法
<body>
<div id="app">
<!-- 调用父组件的方法-->
<number @change="countAdd"></number>
<number @change="countAdd"></number>
<div>父组件--<span>{{count}}</span></div> </div>
<script src="js/vue.js"></script>
<script>
Vue.component('number',{
template:'<div>子组件--<span @click="add">{{num}}</span></div>',
data:function () {
return{
num:0
}
},
methods:{
add:function () {
this.num++
this.$emit('change'.this.num)//向父组件触发事件
}
}
}) new Vue({
el:'#app',
data:{
count:0
},
methods:{
countAdd:function (num) {
this.count++
console.log(num)
}
}
})
</script>
</body>
2、父组件向子组件单向传值
父组件向子组件传值，存在单向数据流
父组件可以随意向子组件传值，但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
<body>
<div id="app">
<!-- 调用父组件的方法-->
<number :num2="number2" num3="10"></number>
<number :num2="number2" num3="10"></number> </div>
<script src="js/vue.js"></script>
<script>
Vue.component('number',{
//父组件向子组件传值，存在单向数据流
//父组件向子组件可以随意传值
//但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
props:['num2','num3'],
template:'<div>子组件--<span @click="change">{{count}}</span></div>',
data:function () {
return{
count:this.num2
}
},
methods:{
change:function () {
this.count = 100
}
}
}) new Vue({
el:'#app',
data:{
number2:99
}
})
</script>
</body>
2.1 props
props可以是数组
Vue.component('number',{
//父组件向子组件传值，存在单向数据流
//父组件向子组件可以随意传值
//但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
props:[num2,num3],
template:'<div>子组件--<span @click="change">{{count}}</span></div>',
data:function () {
return{
count:this.num2
}
},
methods:{
change:function () {
this.count = 100
}
}
})
也可以是字典
Vue.component('number',{
//父组件向子组件传值，存在单向数据流
//父组件向子组件可以随意传值
//但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
props:{
'num2':{
type:[Number,String],//数据类型
default:200,//默认值
required:true//不能和default连用
}
},
template:'<div>子组件--<span @click="change">{{count}}</span></div>',
data:function () {
return{
count:this.num2
}
},
methods:{
change:function () {
this.count = 100
}
}
})
最新文章
- 多行图片hover加边框兼容IE7+
- virtual memory exhausted: Cannot allocate memory
- Shell父进程获取子进程的变量值
- Shiro权限验证代码记录，正确找到shiro框架在什么地方做了权限识别
- KnockOut.js入门示例详解
- python 字符串格式化 输出
- java反编译工具
- hdu 2955 Robberies 背包DP
- dictionary(字典)
- ios UIImagePickerController简单说明
- NYOJ--102--次方求模（快速求幂取模）
- HBase数据备份及恢复(导入导出)的常用方法
- OpenStack中的rabbitmq的配置方法
- Redis wind7 安装
- Linux 下的一个全新的性能测量和调式诊断工具 Systemtap, 第 3 部分: Systemtap
- ns3构建2 core fat tree出错
- LinkedList与Queue
- SecureCRT连接linux步骤
- CPU、GPU、CUDA、cuDNN
- linux学习笔记-时间配置综述