第七十四篇:Vue组件父子传值
好家伙,
1.组件之间的关系
在项目开发中,组件之间的最常见关系分为如下两种:
(1)父子关系
(2)兄弟关系
2.父子之间的数据共享
(1)父->子共享数据
父组件向子组件共享数据需要使用自定义属性.代码示例如下:
App.vue为Left.vue的父组件
其中,父组件要将数据传给子组件
这里我们通过自定义属性props去传值
Left.vue组件的代码如下:
<template>
<div>
<h3>msg的值为:{{ msg }}</h3>
<h3>user的值为:{{ user }}</h3>
</div>
</template>
<script>
export default {
props:['msg','user']
}
</script>
<style>
</style>
App.vue组件的代码如下:
<template>
<div id="app">
<HelloWorld/>
<Left :msg="message" :user="usertable"></Left>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Left from './components/Left.vue'
export default {
name: 'App',
data(){
return{
message:'ni hao shuai',
usertable:{ name:'wuyanzu',age:18 }
}
},
components: {
HelloWorld,
Left
}
}
</script>
看看效果:
可以看见,父子数值传值成功
补充:
不要修改props的值,让props的值为只读
(2)子->父共享数据
子组件向父组件共享数据使用自定义事件
现在我们又又又来假设一个用户需求:
我们来听听客户怎么说的:
创建一个按钮点击自增一的组件,
我希望我在点击这个按钮后,
子组件中可以看见数据的变化,
父组件也可以看见数据的变化,
(好明确的用户需求,虽然说这个客户就是我)
搞起来:
代码如下:
App.vue中:
<template>
<div id="app">
<h1>我是父组件</h1>
<h1>我的msg值为:{{message}}</h1>
<hr>
<h2>下面的是我的子组件</h2>
<hr>
<HelloWorld/>
<Right @numchange="getnewmsg"></Right>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Right from './components/Right.vue'
export default {
name: 'App',
data(){
return{
message:0,
usertable:{ name:'wuyanzu',age:18 }
}
},
components:{
HelloWorld,
Right
},
methods: {
getnewmsg(val){
//此处的val是子组件传过来的值
this.message=val;
console.log("getnewmsg方法被触发了")
}
}
}
</script>
Right.vue文件中:
<template>
<div>
<h3>msg的值为:{{ msg }}</h3>
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
data(){
return{
msg:0
}
},
methods:{
add(){
this.msg+=1;
//修改数据是,调用$emit()方法触发自定义事件
this.$emit('numchange',this.msg)
//一参为处理事件的名称,二参为传递的新值
//触发$emit则触发一参'事件名'的事件
}
}
}
</script>
<style>
</style>
其中,
this.$emit('numchange',this.msg)
单独拿出说一下,点击后,add方法被调用,
同时自定义方法'numchange'被定义,
父组件中,监听到'numchange'发生变化,
从而再触发 'getnewmsg'方法,
同时this.msg被传到numchange的val中
来看看效果:
(客户看了直摇头)
那么就基本上没什么问题了,
That's all