vue中父组件和子组件交互的方式
组件
vue中使用component来表示组件，通过封装组件，我们可以将代码最大程度的复用，可以说组件是vue中的核心。
通信交互
定义了组件之后，我们需要使用它，一般情况我们都是通过在vue中使用compoment方法来引入它，当然有时候也会使用vue.use来引入组件。
组件交互分为两种，一种是父组件的信息传递给子组件，一种是子组件的信息传递给父组件。
- 父传子 父类组件的信息传递给子组件是通过props来传递的。
<!--父组件-->
<template>
<div id="app">
<child-compoment :data="data"></child-compoment>
</div>
</template>
<script>
import child-compoment from './components/children.vue'
export default {
name: 'App',
components: {
child-compoment
},
data:function(){
return {
data:"hello world"
}
}
</script>
<!--子组件-->
<template>
<div class="content">
{{data}}
</div>
</template>
<script>
export default{
name : "child-compoment",
props:{
data:String
}
}
</script>- 子传父子组件传递消息给父组件是通过emit来实现的,emit有两个参数，一个是event,一个是param,也就是说传递是通过事件进行传递的。
<!--父组件-->
<template>
<div id="app">
<children-compoment @jump="getinfo"></children-compoment>
<p>
{{msg}}
</p>
</div>
</template>
<script>
import child-compoment from './components/children.vue'
export default {
name: 'App',
components: {
"child-compoment"
},
data:function{
return{
msg : ""
}
}
methods:{
getinfo:function(value){
this.msg = value
}
}
</script>
<!--子组件-->
<template>
<div class="content">
<button @click="jump">
点我传值
</button>
</div>
</template>
<script>
export default{
name:"children-compoment",
methods:{
click:function(){
this.$emit('jump',"传递的值")
}
}
}
</script>本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-03-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
