一文看懂vue组件通讯

组件传值(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)
  }

组件传值(vue3写法)

1.props

父组件传值给子组件

  
  //父组件
  <child :msg="msg" ></child>
  <script>
  import { ref, reactive } from "vue"
  export default {
      setup(){
          // 创建一个响应式数据           
          const msg = ref(["这是传级子组件的信息"])        
          return { msg }           
      }
  }
  </script>
  ​
  //子组件接收
  export default {
    props: {
       msg2:{
              type:String,
              default:""
          }
    }
    setup(props) {
      console.log(props) // { msg:"这是传给子组件的信息" }
      console.log(props.msg) 
    },
  }

2.emit

子传父

  
  //子组件
  <template>
    <input type="button" @click="sayHandle" value="子传父"  />
  </template>
  <script>
  import { ref } from "vue";
  export default {
    emits:['myClick'],
    setup(props, { emit }) {
      const sayHandle = () => {
        emit("myClick", "我是子组件发送给父组件的消息");
      };
      return { sayHandle }
    },
  };
  </script>
  ​
  //父组件
  <template>
      <child @myClick="myClickHandle"></child>
  </template>
  <script>
  import child from "./child.vue" 
  export default {
    components: { child },
    setup() {
        const myClickHandle = (msg) => {
          console.log(msg) // msg == 父组件收到的信息
      }
    }
  }

3. 依赖注入(vue3)

可以让父组件向孙子组件传值

父组件 provide

  
  import {ref,provide} from  'vue' 
  ​
     const root=ref('我是根组件')
      // provide('键','值')
      provide('rootMsg',root)

孙组件 inject

  
  import {inject}  from 'vue'
  ​
    const sun=inject('rootMsg')
    //console.log(r.value);
    return {sun}

4. v-model

  
  //父组件
  <template>
      <child v-model="msg" v-model:text="message2"></child>
  </template>
  ​
  import child from './components/v-model.vue'
  import { ref } from "vue";
  export default {
    components:{child},
    setup(){
        let msg = ref("hello world!");
        let message2 = ref("hello 2222");
        return { msg,message2 }
     }
    }
  </script>
  ​
  //子组件
  <template>
     <div> {{modelValue}} </div>
  </template>
  export default {
       props: {
        //父组件里面 v-model冒号后面不写值，默认就是modelValue
        modelValue: {   
          type: String,
        },
        text:{
           type: String, 
        }
     }
    }