美文网首页
Vue01组件化实践-01组件通信

Vue01组件化实践-01组件通信

作者: v雪狐v | 来源:发表于2020-07-01 11:41 被阅读0次

    组件通信常用方法

    以下demo github地址: feature/communication分支

    • props
    <!-- Child.vue -->
      <template>
          <div>
              <p>{{msg}}</p>
          </div>
      </template>
      <script>
      export default {
         // props: ['msg'],    //基本用法
        props: {
            msg: {
                  type: String,
                  //required: true,  // 默认false,是否必传  必传自然就没有default
                  default: ""  
            }
        }
      }
      </script>
    
    <!-- Parent.vue -->
      <template>
          <Child msg='from parent to child message'></Child>
      </template>
      <script>
      import Child from './Child.vue'
      export default {
            components: {
                Child
            }
        }
      </script>
    
    • $emit / $on ( 发布/订阅)
    <!-- Child.vue -->
    <template>
      <div>
        <p>Child1.vue</p>
        <input type="text" v-model="val" @input="handleInput">
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            val : ""
          }
        },
        mounted() {
          this.handleInput();
        },
        methods : {
          handleInput () {
            this.$emit('emitEvent', this.val)
          }
        }
      }
    </script>
    
    <!-- Parent.vue -->
        <template>
            <div>
                <Child @emitEvent="getFromChild"></Child>
                <p>从child订阅的值:{{val}}</p>
            </div>
        </template>
        <script>
        import Child from './Child.vue'
        export default {
             components: {
                  Child
            },
            data() {
                return {
                    val : "",
                }
            },
            methods: {
                  getFromChild(args){
                      this.val = args;
                  }
            }
        }
       </script>
    
    • event bus (总线 --> $emit / $on)
    //main.js
    Vue.prototype.$bus = new Vue();  //注册全局的bus 
    
    //Bus.vue
    <template>
      <div>
        <Bus1></Bus1>
        <Bus2></Bus2>
      </div>
    </template>
    <script>
      import Bus1 from "../components/module/Bus1";
      import Bus2 from "../components/module/Bus2";
      export default {
        components: {
          Bus1,
          Bus2
        }
      };
    </script>
    
    //Bus1.vue
    <template>
      <div>
        <p>Bus1</p>
        <input type="text" v-model="inputVal" />
        <button @click="handleAddBusVal">Bus1发布</button>
      </div>
    </template>
    
    <script>
      export default {
        mounted(){
          this.$nextTick(()=>{
            this.handleAddBusVal();
          })
        },
        data() {
          return {
            inputVal: 'Event Bus1 message to Bus2'
          }
        },
        methods: {
          handleAddBusVal() {
            this.$bus.$emit('addBusVal',this.inputVal);
          }
        },
      };
    </script>
    
    // Bus2.vue
    <template>
      <div>
        <p>Bus2</p>
        <p>{{busVal}}</p>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            busVal: '2222'
          };
        },
        mounted() {
          this.$bus.$on('addBusVal',target=>{
            this.busVal = target
          });
        }
      };
    </script>
    

    相关文章

      网友评论

          本文标题:Vue01组件化实践-01组件通信

          本文链接:https://www.haomeiwen.com/subject/jhlfqktx.html