学习-Vue-vue组件间通信方式

学习-Vue-vue组件通信方式

一、父传子

1、单项绑定，通过props方式获取父组件数据

1、 父组件直接单向绑定 子组件通过props方式进行接收
    缺点：无法做到父组件直接传给孙子辈分组件
  父组件：
  <h1>this is Home <h1>
  <hr />
  <List :str1 = 'str1'><List>  // 在这里进行绑定操作
  <script>
  import List from @/components/List
  export defalt {
  name: 'HomeVue',
  data () {
  return {
  str1; '这是Home的数据'
  }
  },
  components: {
  List
  }
  }
  <script>
  
  子组件： componets路径下的 List.vue文件
  <h2>this is List {{str1}}<h2>
  <script>
  export default {
  props： {
  str1: {
  type: String,
  default: ''
  }
  }
  }
  <script>

2、通过this.$parents.xxx方式获取

  2、子组件直接试用父组件的数据 this.$parent.xxxx
  和props方式的区别： 采用this.$parent.xxx 方式调用可以直接修改父组件的数据 ; 而props方式不可以直接修改父组件的数据
  父组件：
  <h1>this is Home <h1>
  <hr />
  <List><List>  // 在这里进行绑定操作
  <script>
  import List from @/components/List
  export defalt {
  name: 'HomeVue',
  data () {
  return {
  str1; '这是Home的数据'
  }
  },
  components: {
  List
  }
  }
  <script>
  
  子组件： componets路径下的 List.vue文件
  <h2>this is List {{$parent.str1}}<h2>
  <script>
  export default {
  }
  <script>

3、通过provide inject 依赖注入直接获取

  3、依赖注入
  优势： 父组件可以直接向某个后代(孙子辈...)通信（传值）不需要一级一级传递
  <template>
  <h1>this is Home </h1>
  <hr/>
  <List></List>
  </template>
  <script>
  import List from '@/components/List'
  export default {
  name : 'HomeVue',
  data () {
  return {
  str1: '这是home的数据'
  }
  }
  components : {
  List
  },
  provide () {   // 用provide进行依赖注入传参！！！
  return {
  val1 : '这是home的依赖内容'
  }
  }
  
  
  子组件： components路径下的List.Vue文件
  <template>
  <h2> this is List {{str1}}< /h2>
  <News> this is News <News>
  </template>
  <script> 
  import News from @/compoents/News
  export default {
  components: {
  News
  }
  }
  < /script>
 
 
 孙子组件： compoents路径下的News.Vue文件
 <template>
 <h3> {{val1}} </h3>
 </template>
 
 <script>
export default {
inject:['val1']  // 依赖注入 通过inject 接值！！！
}
 </script>

二、后代传父

1、子组件定义自定义事件 this.emit

2、父组件直接试用子组件数据

this.children[0].str2 \\ 不常用

3、父组件通过ref形式获取/修改 子组件数据

<List ref='child'> </List>
this.$ref.child.xxx

二、兄弟(平辈)组件传值

通过新建bus.js文件中转进行传值