Vue组件传值

1. 父向子传值

• 在子组件的自定义标签上写 动态属性:data = '数据'
• 在子组件中定义props的选项['data']

// 父组件
<template>
  <div id="app">
    <p>我是父组件的内容区域</p>
    <p>{{msg}}</p>
    <child-a :data='msg'></child-a>
  </div>
</template>

<script>
import childA from '@/components/childA'

export default {
  name: 'App',
  data(){
    return{
      msg:'我是父组件中的数据'
    }
  },
  components:{ comOne }
}
</script>
复制代码

// 子组件
<template>
 <div>
   <p>我是子组件的内容区域</p>
   <p>{{msg}}</p>
   <p>{{data}}</p>
 </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '我是子组件的数据'
    }
  },
  //使用props来读取data
  props:['data']
}
</script>
复制代码

2. 子向父传值

• 自定义事件
  • 绑定事件 <child-a @toParent="fn"></child-a>
  • 触发事件 this.$emit('toParent', this.msg)
• 步骤
  • 须要在子组件的自定义标签上绑定一个自定义事件
  • 若是须要传值给父组件,让子组件去触发这个事件this.$emit(),触发的同时传参

// 父组件
<template>
  <div id="app">
    <p>我是父组件的内容区域</p>
    <p>{{msg}}</p>
    <child-a @toParent="fn"></child-a>
  </div>
</template>

<script>
import childA from '@/components/childA'
export default {
  name: 'App',
  data(){
    return{
      msg:'我是App组件中的数据',
      test:''
    }
  },
  components:{ childA },
  methods:{
    fn(val){
      this.test=val
    }
  }
}
</script>
复制代码

// 子组件
<template>
 <div>
   <p>我是子组件的内容区域</p>
   <p>{{msg}}</p>
   <button @click="ToParent">向父组件中发射一个fn事件</button>
 </div>
</template>

<script>
export default {
  name: 'comTwo',
  data () {
    return {
      msg: '我是子组件的数据'
    }
  },
  methods:{
    ToParent(){
      //$emit---发射的意思,使用$emit方法,去发射一个sender事件
      this.$emit('toParent',this.msg)
    }
  }
}
</script>
复制代码

3. 非父子传值

• 事件总线
  • 统一控制事件的绑定和触发
  • 建立一个busevent.js模块 暴露vue实例

  // 事件总线
  // 1.依赖一个vue实例
  import Vue from 'vue'
  const vm = new Vue()
  export default vm
  // 2.在A.B两个组件中导入这个实例
  // 3. 绑定事件
  // 4. 在实例中绑定的事件 只有当前实例能够去触发
  复制代码

• 步骤
  • 在A组件导入 事件总线模块 获得一个实例,而后用这个实例绑定一个自定义事件

  <template>
      <div>
          child-a <b>{{count}}</b>
  </div>
  </template>
  
  <script>
      import bus from './busEvent'
      export default {
      name: 'child-a',
      data () {
          return {
              count: 0
          }
      },
      created () {
          bus.$on('toB',(data) =>{
              this.count = data
          })
      }
  }
  </script>
  复制代码

  • 在B组件也导入事件总线模块获得一个实例,用这个实例触发在A组件中绑定的自定义事件

  <template>
      <div>
          child-b
          <button @click="fn">toA</button>
      </div>
  </template>
  
  <script>
      import bus from './busEvent'
  
      export default {
          name: 'child-b',
          data () {
          return {
              count: 100
          }
      },
      methods: {
          fn () {
              bus.$emit('toB', this.count)
          }
      }
  }
  </script>
  复制代码

  • 最后经过事件的回调函数进行传参