组件传值方法(vue2写法)

1. props 父传子

父组件绑定数据传递,子组件接收(子组件不能直接修改父组件的数据)

  //父组件
  <Child :msg="data"/>
  data() {
    return {
      data: '父组件传给子组件的信息'
    }
  }
  
  //子组件
   props: {
      msg: {
        type: String,
        default: ''
      }
    }
复制代码

2. $emit 子传父

子组件通过 $emit 自定义事件 ,父组件监听事件接收

  //子组件
  <button @click="sendHandle">发送</button>
  export default {
    data(){
        return { msg: "这是发给父组件的信息" }
    },
    methods: {
        sendHandle(){
            this.$emit("send",this.msg)
        }
    },
  }
  //父组件
  <Child @send="getChildMsg"" />
  export default {
      methods:{
          getChildMsg(msg){
              console.log(msg) // 这是父组件接收到的消息
          }
      }
  }
复制代码

3. EventBus事件总线

兄弟组件之间相互传值 (vue3已废弃)

  //自定义bus代码
  class Bus {
    constructor () {
      this.callbackList = {}
    }
  
    $on (name, callback) {
      // 注册事件
      this.callbackList[name] ? this.callbackList[name].push(callback) : (this.callbackList[name] = [callback])
    }
  
    $emit (name, args) {
      // 触发事件
      if (this.callbackList[name]) {
        this.callbackList[name].forEach(cb => cb(args))
      }
    }
  }
  
  Vue.prototype.$bus = new Bus()
  
  // 组件A：注册事件
  this.$bus.$on('send', 'msg')
  
  // 组件B：触发事件
  this.$bus.$emit('send', list)
  
复制代码

4. $ref

可以在父组件获取子节点dom

  //父组件
  <Child  ref="getChild"></Child >
  export default {
    mounted(){
      // 调用引用的子组件的方法
      this.$refs.getChild.refHandle()
      // 修改子组件data数据
      this.$refs.getChild.msg = "hello world !";
    }
  }
  
复制代码

5. provide&inject (依赖注入)

父组件设置provide 代码传值,后代通过inject 接收

  //父组件
  <Child ></Child >
  export default {
    provide(){
      return {
        msg: 'hello world!'
      }
    }
  }
  // 后代组件
  export default {
    inject: ['msg']
    mounted(){
      console.log(this.msg)  //hello world!
    }
  }
复制代码

6. vuex 数据共享

组件直接获取数据 (详细可以查看我之前的vuex文章)

this.$store.state.user.username

7. slot 作用域插槽

  //子组件
  <template>
      <div>
          <slot :user="user"></slot>
      </div>
  </template>
  export default{
      data(){
          return {
              user:{ name:"路飞" }
          }
      }
  }
  //父组件
  <template>
      <div>
          <child slot-scope="scope">
              {{ scope.user.name }}
          </child>
      </div>
  </template>
  
复制代码

8. v-model

可以将父组件传给子组件的数据变为双向绑定，子组件通过 $emit 修改父组件的数据

  
  //父组件
  <template>
      <child v-model="msg"></child>
  </template>
  <script>
  export default {
      data(){
          return {
              msg:"hello world!"
          }
      }
  }
  
  //子组件
  <template>
     <div> {{value}} </div>
  </template>
  export default {
      props: {
        value: {   // value (vue2写法,vue3有差异)
          type: String,
          default: ''
        }
    }
  
复制代码

9 .sync修饰符

父组件使用 .sync 修饰符 ,子组件直接修改数据

  //父组件
  <el-dialog
        :visible.sync="showDialog"
      >
      
  //子组件
  hCancel() {    //取消按钮
      this.$emit('update:showDialog', false)
  }
复制代码