第二节.组件之间的通信

①props -> 父子组件之间通信

<template>
  <div class="parent">
    <Son title="标题"/>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Parent',
  components: {
    Son
  }
}
</script>

<template>
  <div class="parent">
    <div>{{ item }}</div>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Son',
  props: {
    title: {
      type: String,
      default: '默认标题'
    }
  }
}
</script>

②event -> 当子组件发生某些事，可通过event通知父组件

<template>
  <div class="parent">
    <Son title="标题" @say="say"/>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Parent',
  components: {
    Son
  },
  methods: {
    say(arg) {
      console.log('say', arg)
    }
  }
}
</script>

<template>
  <div class="parent">
    <div>{{ item }}</div>
    <button @click="handleClick">点我</button>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Son',
  props: {
    title: {
      type: String,
      default: '默认标题'
    }
  },
  methods: {
    handleClick() {
      this.$emit('say', '我是参数')//=> 第一个参数是触发的自定义函数名 后面的是参数
    }
  }
}
</script>

③style和class以及attribute(data-)

父组件可以向子组件传递style和class，他们会合并到子组件的根元素上

<template>
  <div class="parent">
    <Son 
      title="标题" 
      class="t-right"
      style="color: royalblue"
      data-1="attrs"
    />
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Parent',
  components: {
    Son
  }
}
</script>

<style scoped>
.t-right {
  text-align: right;
}
</style>

<template>
  <div class="son">
    <div>{{ title }}</div>
  </div>
</template>

<script>
export default {
  name: 'Son',
  //inheritAttrs: false,
  props: {
    title: {
      type: String
    }
  },
  created() {
    console.log(this.$attrs);//{data-1: 'attrs'} 获取
  }
}
</script>

• 注意子组件可以通过inheritAttrs: false设置, 禁止将attrbute附着在子组件的根元素上,但是不影响this.$attrs获取 ④native修饰符

会把方法附着在子组件的根元素上面

<template>
  <div class="parent">
    <Son @click.native="say"/>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Parent',
  components: {
    Son
  },
  methods: {
    say() {
      console.log('native')
    }
  }
}
</script>

⑤v-model这个自己看文档了，后面单独记录

⑥$parent这个自己看文档了

⑦$children这个自己看文档了

⑧provide/inject -> 注入渗透，一般都是些不变的数据做展示用的

• App -> A -> B

<template>
  <div class="app">
    <A />
  </div>
</template>

<script>
import A from './A.vue'
export default {
  name: 'A',
  provide: {
      a: 1,
      b: 2
  },
  components: {
    A
  }
}
</script>

<template>
  <div class="app">
    <B />
  </div>
</template>

<script>
import B from './B.vue'
export default {
  name: 'B',
  components: {
    B
  }
}
</script>

<template>
  <div class="app">
    <p>{{ a }}</p>
    <p>{{ b }}</p>
  </div>
</template>

<script>
export default {
  name: 'C',
  inject: ['a', 'b']
}
</script>

⑨vuex后面单独记录

⑩store模式

缺点无法跟踪数据的变化不推荐使用

//store.js
const store = {
  userInfo: store.userInfo
}

//compA 导入进来
data() {
  return {
    userInfo: store.userInfo
  } 
}

//compB 导入进来
data() {
  return {
    userInfo: store.userInfo
  } 
}

11.eventBus事件总线 -> 一个观察者模式

不推荐大篇幅使用，使用过多数据混乱