VUe3组件传值
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUe3组件传值相关的知识，希望对你有一定的参考价值。
1、组件间的数据传递
默认情况下，每个组件实例都是独立的，组件间无法直接访问数据
因此需要组件间的数据传递，也称为组件间的通讯
分类：
父组件向子组件的数据传递
子组件向父组件的数据传递
a、父向子组件传递数据
父向子传递数据
步骤：
1、父组件在调用子组件时，以属性绑定的方式将要传递的数据绑定在子组件标签上
2、在子组件对象中，使用props选项声明获取的数据，进行绑定属性的拦截，即接收来自父组件的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<my-hello></my-hello>
</div>
<template id="hello">
<div>
<h3>我是父组件</h3>
<h2>{{msg}},{{info}},{{user.username}}</h2>
</div>
<!-- 调用子组件 -->
<my-world :msg="msg" :info='info' :user='user'></my-world>
</template>
<template id="world">
<div>
<h3>我是子组件</h3>
<h2>访问父组件的变量: {{ msg }} ,{{info}},{{user.username}}</h2>
</div>
</template>
<script>
Vue.createApp({
components:{
'my-hello':{
template:'#hello',
data(){
return{
msg:"huitao",
info:"浩轩",
user:{
id:123,
username:'admin',
password:'123'
}
}
},
components:{
'my-world':{
template:'#world',
// 接受父组件的的传递数据
// props:['msg','info','user']
//取值也可以是对象
props:{
msg:String,
info:{
type:String,
//如果没有传递值，这里会使用默认值
default:'csdn'
},
user:{
type:Object
}
}
}
}
}
}
}).mount('#app')
</script>
</body>
</html>b、子组件给父组件传递数据
子向父传递数据
步骤：
1、父组件正在调用子组件时，监听子组件出发的自定义事件，并再父组件中定义毁掉方法，用来接收数据
2、在子组件中使用vm.$emit(事件名，数据)出发自定义事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<my-hello></my-hello>
</div>
<template id="hello">
<div>
<h3>我是父组件</h3>
<h2>访问子组件的数据：{{ sex }}</h2>
</div>
<!-- 调用子组件 -->
<!-- 绑定一个事件 -->
<my-world @e-data="get"></my-world>
</template>
<template id="world">
<div>
<h3>我是子组件</h3>
<h3>访问自己的数据：{{sex}}</h3>
<button @click="send">点击将数据传递给父组件</button>
</div>
</template>
<script>
Vue.createApp({
components:{
'my-hello':{
template:'#hello',
data(){
return{
//子组件传递过来的数据，存储到数据仓库中
sex:null
}
},
methods:{
//接收子组件传递过来的数据
get(sex){
console.log(sex)
this.sex=sex
}
},
components:{
'my-world':{
template:'#world',
// 接受父组件的的传递数据
// props:['msg','info','user']
//取值也可以是对象
props:{
},
data(){
return{
sex:'male'
}
},
methods:{
send(){
//使用$emit()出发一个自定义事件
this.$emit('e-data',this.sex)
}
}
}
}
}
}
}).mount('#app')
</script>
</body>
</html>
以上是关于VUe3组件传值的主要内容，如果未能解决你的问题，请参考以下文章