vue中父组件和子组件交互的方式

作者: dreamfly 分类: javascript 发布时间: 2020-03-03 11:01

组件

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>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!