vue-父子组件传值

Posted 2021-03-23 czh64

父组件传给子组件：子组件通过props方法接收数据

子组件传给父组件：通过$emit方法传递参数

一、props方法：

1.静态传值：

父组件中子组件的标签设置一个自定义属性并赋值：

<component message="hello"></component>

子组件中通过props方法接收

export default {
    props:[‘message‘]
}

可以显示到页面上

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

2.动态传值：（根据父组件中值的变化，动态改变子组件中的值）

父组件中属性双向绑定：

<template>
  <div>
     <input type="text" v-model="hello">
    <keep-alive>
      <component :message="hello"></component>
    </keep-alive>
  </div>
</template>
<script>
    export default{
    data(){
      return {
        hello:"hello"//初始值
      }
    }
</script>

子组件不变；

二、通过ref实现页面间的通信

1.静态传值

父组件中设置ref属性和getMessage方法：

<template>
  <div>
    <keep-alive>
      <component ref="msg"></component>
    </keep-alive>
  </div>
</template>
<script>
  export default{
    mounted:function () {
      console.log(this.$refs.msg);
      this.$refs.msg.getMessage(‘我是子组件一！‘)
    }
  }
</script>

子组件通过getMessage方法显示在页面中：

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        message:‘‘
      }
    },
    methods:{
      getMessage(m){
        this.message=m;
      }
    }
  }
</script>

prop和ref之间的区别：

• prop着重于数据的传递，他不能调用子组件里的数据和方法，想创建文章组件时，自定义标题和内容这样的使用场景最适合prop；
• ref着重于索引，主要用来调用子组件里的数据和方法，其实比并擅长数据的传递，而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

2.父组件调用子组件的属性和方法

子组件中的属性与方法：

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        message:‘aaaaa‘
      }
    },
    methods:{
      fun(){
        console.log(this.message)
        console.log("调用了组件1的方法")
      }
    }
  }
</script>

父组件中调用：

<template>
  <div>
    <keep-alive>
      <component ref="msg"></component>
    </keep-alive>
  </div>
</template>
<script>
  import simple1 from "./simple1.vue";
  export default{
    data(){
      return {

      }
    },
    methods: {
      handleClick(){
        this.$refs.msg.fun();//调用子组件的方法
        console.log(this.$refs.msg.message)//获取子组件的属性
      }
    },
    components: {
      simple1
    },
    mounted () {
      this.handleClick();
    }
  }
</script>

三、$emit方法实现通信

$emit(event,arg) 

event为绑定的一个自定义事件，当他执行的时候将他的参数arg传递给父组件，父组件通过@event事件监听并接收参数。

1.静态传值

在子组件中：

template>
  <div>
    这是子组件
  </div>
</template>
<script>
  export default {
    data(){
      return{

      }
    },
    mounted () {
      this.$emit(‘getFun‘,‘这里是要传的参数‘)
    }
  }
</script>

在父组件中：

<template>
  <div>
    <p>{{title}}</p>
    <keep-alive>
      <component @getFun="showMsg"></component>
    </keep-alive>
  </div>
</template>
<script>
  import simple1 from "./simple1.vue";
  export default{
    data(){
      return {
        title:‘‘
      }
    },
    methods: {
      showMsg(title){
        this.title=title;
      }
    },
    components: {
      simple1
    }
  }
</script>

2.动态传值

子组件中：

<template>
  <div>
    这是子组件
    <input type="text" v-model="arg">
    <button @click="fun">传值</button>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        arg:‘‘
      }
    },
    methods:{
      fun(){
        this.$emit(‘getFun‘,this.arg)
      }
    }
  }
</script>

父组件不变；

Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递；

但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。

Vue 的状态管理工具 Vuex 完美的解决了这个问题。

原文：cnblogs.com/hlyin/p/10608660.html