vue 父子组件间如何通过事件进行通信$emit和update:modelValue

骑猪看日落 2022-09-09 11:00 155阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title></title>
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
      <div id="root"></div>
    </body>
    <script>
      const app = Vue.createApp({
        data() {
          return { count: 1 }
        },
        template: `
          <counter v-model="count" />
        `
      });
    
      app.component('counter', {
        props: ['modelValue'],
        methods: {
          handleClick() {
            this.$emit('update:modelValue', this.modelValue + 3);
          }
        },
        template: `
          <div @click="handleClick">{
       {modelValue}}</div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>lesson</title>
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
      <div id="root"></div>
    </body>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            count: 'a',
          }
        },
        template: `
          <counter v-model.uppercase="count" />
        `
      });
    
      app.component('counter', {
        props: {
          'modelValue': String,
          'modelModifiers': {
            default: ()=> ({})
          }
        },
        methods: {
          handleClick() {
            let newValue = this.modelValue + 'b';
            if(this.modelModifiers.uppercase) {
              newValue = newValue.toUpperCase();
            }
            this.$emit('update:modelValue', newValue);
          },
        },
        template: `
          <div @click="handleClick">{
       {modelValue}}</div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    </html>