vue02基础篇03

1 组件通信

1.1 组件通信介绍

• 介绍： 组件之间，需要相互传递数据

• 作用： 传递数据，很多时候需要看懂别人封装的组件，或自己封装组件。

1.2 组件通信的三种方式

• 父传子： 父组件传递给子组件

  // 父组件
  <template>
    <div class="father">
      <h1>父传子</h1>
      <Son :money="money" desc="儿子，爸爸给你100块" :属性名="属性值" />
    </div>
  </template>
  ​
  // 子组件
  export default {
      props: ['money', 'desc', '属性名'],
      props: {
          // 注意： 如果不满足这些条件，会警告，但是仍然正常显示。
          money：{
             type: 类型，  // String Number Boolean Object Array
             required: 是否必填  // true false
             default:  默认值   // 基本类型直接写 如果是对象或数组 写一个函数 再返回默认值
          }，
        
          desc： {}，
          属性名： {}
      }
  }

• 子传父: 子组件传递给父组件

  // 父组件
  <template>
      <子组件的标签 @自定义事件名="处理函数"></子组件的标签>
  </template>
  export default {
      methods: {
          处理函数(data) {
              // data就是子组件传递过来的数据
          }
      }
  }
  ​
  // 子组件
  this.$emit('自定义事件名', 数据)

• 乱传：【中央事件总线bus】 任意两个组件，可以自由传递

  • 在main.js中，定义一个空的vue实例，当成中介 【1】

    Vue.prototype.$bus = new Vue()

  • A组件传递出去

    this.$bus.$emit('自定义事件名', 数据)

  • B组件接收

    this.$bus.$on('自定义事件名', (data) => {
        // data就是接收到的数据
    })

    注意： bus传递数据，两个组件需要时 同时存在，同时渲染的状态

2 插槽

• 作用： 子组件预留 ==插槽==， 将来使用组件的时候，可以把==内容==插入插槽的位置。

• 分类：

  • 匿名插槽

  • 具名插槽

  • 作用域插槽

  // 父组件
  <Son2>
    <p slot="header">我是内容 header header</p>
    <p slot="main">我是内容 main main</p>
    <p slot="footer" slot-scope="scope">{{scope}}我是内容 footer footer</p>
  </Son2>
  ​
  // 子组件
  <div class="son2">
      <h2>子组件3</h2>
      <header>
        <!-- 匿名插槽 -->
        <!-- <slot></slot> -->
  ​
        <!-- 具名插槽 -->
        <slot name="header"></slot>
      </header>
  ​
      <main>
        <!-- <slot></slot> -->
  ​
        <!-- 具名插槽 -->
        <slot name="main"></slot>
      </main>
  ​
      <footer>
        <!-- 作用域插槽 -->
        <slot :content="content" :msg="msg" name="footer"></slot>
      </footer>
  </div>

• 指令：v-slot 【vue 2.6.x 推出的，取代插槽的以前的写法】

// 子组件写法不变  只是改不了父组件的写法
<Son2>
  <template v-slot:header>
    <p>我是内容 header header</p>
  </template>
​
  <template #main>
    <p>我是内容 main main</p>
  </template>
​
  <template #footer="scope">
    <p>{{scope}}我是内容 footer footer</p>
  </template>
</Son2>