vue组件通信--父子组件之间传值的几种方式

引入组件方式

1、全局引入

在main.js文件中引入并且注册

import ChildrenDemo from '@/views/components/ChildrenDemo'
Vue.component('ChildrenDemo',ChildrenDemo)// 第一个参数 全局组件的名字(字符串类型)，第二个参数：引入的组件名（一般都与组件名保持一致）

2、局部引入（那里需要往哪里搬）

在需要的父组件中引入 并且使用

//使用组件
<ChildrenDemo></ChildrenDemo>
<!-- 或 -->
<children-demo></children-demo>


//导入文件
import ChildrenDemo from '@/views/components/ChildrenDemo'

//注册组件
export default {
  components: {
    ChildrenDemo
  },
}

一、父组件向子组件传值

在子组件 prop 中可以注册一些自定义组件属性，父组件调用子组件时可以向 prop 中的自定义属性传值。

父组件代码

<template>
  <div class="parent">
    <ChildrenDemo ：title="向子组件传递的title值"></ChildrenDemo>
  </div>
</template>

子组件代码（通过props接收父组件传过来的值）

<template>
  <div class="ChildrenDemo">
    <h1>{{title}}</h1>
  </div>
</template>

<script>
export default {
  name: 'ChildrenDemo',
  props:['title'],
  components: {
  },
  data () {
    return {
    }
  }
}
</script>

props的更多写法

1、字符串数组形式

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

2、指定prop值类型

export default {
  props: {
    title: {
      type: Object,  //类型
      required: true,//是否必须
      default: {}    //默认值
    }
  },
}

二、子组件向父组件传值

通过 vue 实例方法 vm.$emit子组件可以自定义一个事件提交给父组件，触发父组件的方法，父组件通过监听子组件的自定义事件可以接收子组件传递的数据。

子组件

<template>
  <div class="ChildrenDemo">
    <h1>子组件</h1>
    <button @click="changeParentTitle">点击更改父组件title</button>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    changeParentTitle() {
      this.$emit("childEvent", "子组件传给父组件的title")//第一个参数是提交的事件名，后面的参数可以是多个需要传递给父组件的参数
    }
  }
};
</script>

父组件

<template>
  <div class="home">
    <h1>父组件title值：{{ title }}</h1>
    <ChildrenDemo :title="title" @childEvent="changeTitle"></ChildrenDemo>
  </div>
</template>

<script>
import ChildrenDemo from "@/views/components/ChildrenDemo";
export default {
  components: {
    ChildrenDemo,
  },
  data() {
    return {
      title: "My Journey with Vue"
    };
  },
  methods: {
    changeTitle: function (str) {
      this.title = str
    },
  },
};
</script>

三、使用 $refs （父组件访问子组件的数据和方法）

父组件

<template>
  <div class="home">
    <h1>父组件title值：{{ title }}</h1>
    <ChildrenDemo :title="title" @childEvent="changeTitle" ref="ChildrenDemo"></ChildrenDemo>
    <buttom @click="btn">点击按钮</buttom>
  </div>
</template>

<script>
import ChildrenDemo from "@/views/components/ChildrenDemo";
export default {
  components: {
    ChildrenDemo,
  },
  data() {
    return {
      title: "My Journey with Vue"
    };
  },
  methods: {
    changeTitle: function (str) {
      this.title = str
    },
    //调用子组件的方法
    btn(){
       this.$refs.ChildrenDemo.change    
    }
  },
};
</script>

子组件只需要有这个change 方法就可以被调用

注意：

1、$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
2、由于ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

四、使用$parent（子组件访问父组件的数据和方法）

<button @click="getParentData">点击获取父组件数据</button>

getParentData(){
  let parent = this.$parent //获取父组件实例
  console.log(parent.parentValue) //访问父组件属性
  parent.parentFn() //调用父组件的方法parentFn()
}

五、现在常用的vuex 进行组件之间的传值（这里就不详细介绍了）