商务合作
  1. Worktile社区首页
  2. 科技

vue是如何组建传值的

worktile • • 科技

vue是如何组建传值的

Vue 通过以下几种方式来实现组件间的传值：1、props；2、事件（Event）；3、$emit；4、Vuex；5、provide/inject；6、$attrs 和 $listeners。其中，最常用的方式是通过 props 和 $emit 实现父子组件间的数据传递。下面详细介绍这两种方法。

一、PROPS

使用 props 是 Vue 中父组件向子组件传递数据的主要方式。父组件通过在子组件的标签上定义属性的方式，将数据传递给子组件。

使用步骤如下：

  1. 在子组件中定义 props 接收属性： 
    // 子组件
    

    export default {
    

      props: {
    

        message: String,
    

        count: Number
    

      }
    

    }

  2. 在父组件中使用子组件并传递数据： 
    <!-- 父组件 -->
    

    <template>
    

      <div>
    

        <child-component :message="parentMessage" :count="parentCount"></child-component>
    

      </div>
    

    </template>
    

    <script>
    

    import ChildComponent from './ChildComponent.vue';
    

    export default {
    

      components: {
    

        ChildComponent
    

      },
    

      data() {
    

        return {
    

          parentMessage: 'Hello from Parent',
    

          parentCount: 10
    

        };
    

      }
    

    }
    

    </script>

二、事件（EVENT）

事件机制是 Vue 中子组件向父组件传递数据的主要方式。子组件通过 $emit 触发事件，父组件通过监听这些事件来获取数据。

使用步骤如下：

  1. 在子组件中使用 $emit 触发事件并传递数据：

    // 子组件
    

    export default {
    

      methods: {
    

        notifyParent() {
    

          this.$emit('notify', 'Hello from Child');
    

        }
    

      }
    

    }

  2. 在父组件中监听子组件触发的事件并接收数据：

    <!-- 父组件 -->
    

    <template>
    

      <div>
    

        <child-component @notify="handleNotification"></child-component>
    

      </div>
    

    </template>
    

    <script>
    

    import ChildComponent from './ChildComponent.vue';
    

    export default {
    

      components: {
    

        ChildComponent
    

      },
    

      methods: {
    

        handleNotification(message) {
    

          console.log(message); // 输出：Hello from Child
    

        }
    

      }
    

    }
    

    </script>

三、$EMIT

$emit 是 Vue 提供的一个方法，用于在子组件中触发自定义事件并传递参数。父组件可以通过监听这些自定义事件来响应并处理传递过来的数据。

使用步骤如下：

  1. 在子组件中使用 $emit 触发事件并传递数据：

    // 子组件
    

    export default {
    

      methods: {
    

        sendData() {
    

          this.$emit('data-sent', { id: 1, name: 'Vue' });
    

        }
    

      }
    

    }

  2. 在父组件中监听子组件触发的事件并接收数据：

    <!-- 父组件 -->
    

    <template>
    

      <div>
    

        <child-component @data-sent="handleData"></child-component>
    

      </div>
    

    </template>
    

    <script>
    

    import ChildComponent from './ChildComponent.vue';
    

    export default {
    

      components: {
    

        ChildComponent
    

      },
    

      methods: {
    

        handleData(data) {
    

          console.log(data); // 输出：{ id: 1, name: 'Vue' }
    

        }
    

      }
    

    }
    

    </script>

四、VUEX

Vuex 是 Vue 的状态管理模式，适用于需要在多个组件之间共享状态的场景。Vuex 通过集中式的存储管理应用的所有组件的状态，提供了一种全局的状态管理方案。

使用步骤如下：

  1. 安装 Vuex 并配置 Store：

    // store.js
    

    import Vue from 'vue';
    

    import Vuex from 'vuex';
    

    Vue.use(Vuex);
    

    export default new Vuex.Store({
    

      state: {
    

        message: 'Hello from Vuex'
    

      },
    

      mutations: {
    

        updateMessage(state, newMessage) {
    

          state.message = newMessage;
    

        }
    

      }
    

    });

  2. 在组件中使用 Vuex 的状态和方法：

    <!-- 组件 -->
    

    <template>
    

      <div>
    

        <p>{{ message }}</p>
    

        <button @click="changeMessage">Change Message</button>
    

      </div>
    

    </template>
    

    <script>
    

    import { mapState, mapMutations } from 'vuex';
    

    export default {
    

      computed: {
    

        ...mapState(['message'])
    

      },
    

      methods: {
    

        ...mapMutations(['updateMessage']),
    

        changeMessage() {
    

          this.updateMessage('New Message from Component');
    

        }
    

      }
    

    }
    

    </script>

五、PROVIDE/INJECT

provide 和 inject 是 Vue 2.2.0+ 引入的新特性，用于祖先组件和后代组件之间的传值。祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。

使用步骤如下：

  1. 在祖先组件中使用 provide 提供数据：

    // 祖先组件
    

    export default {
    

      provide() {
    

        return {
    

          message: 'Hello from Ancestor'
    

        };
    

      }
    

    }

  2. 在后代组件中使用 inject 注入数据：

    // 后代组件
    

    export default {
    

      inject: ['message'],
    

      mounted() {
    

        console.log(this.message); // 输出：Hello from Ancestor
    

      }
    

    }

六、$ATTRS 和 $LISTENERS

$attrs 和 $listeners 是 Vue 提供的两个属性，用于在多级组件嵌套的情况下传递数据和事件。$attrs 包含父作用域中不作为 props 被识别的特性绑定（class 和 style 除外），$listeners 包含父作用域中的事件监听器。

使用步骤如下：

  1. 在中间组件中使用 $attrs 和 $listeners 传递数据和事件：

    // 中间组件
    

    export default {
    

      inheritAttrs: false, // 禁用自动绑定
    

      render(h) {
    

        return h('child-component', {
    

          attrs: this.$attrs,
    

          on: this.$listeners
    

        });
    

      }
    

    }

  2. 在父组件中传递数据和事件：

    <!-- 父组件 -->
    

    <template>
    

      <div>
    

        <middle-component message="Hello" @notify="handleNotification"></middle-component>
    

      </div>
    

    </template>
    

    <script>
    

    import MiddleComponent from './MiddleComponent.vue';
    

    export default {
    

      components: {
    

        MiddleComponent
    

      },
    

      methods: {
    

        handleNotification() {
    

          console.log('Notification received');
    

        }
    

      }
    

    }
    

    </script>

总结：Vue 提供了多种方式来实现组件间的传值，主要包括 props、事件（$emit）、Vuex、provide/inject 以及 $attrs 和 $listeners。选择适合的方式取决于具体的应用场景和需求。对于简单的父子组件间的数据传递，props 和 $emit 是最常用的方法；对于复杂的跨组件传值，可以考虑使用 Vuex 或 provide/inject。根据具体需求，灵活运用这些方法，可以使你的 Vue 应用更加健壮和高效。

相关问答FAQs：

1. Vue中如何进行组件间的传值？

在Vue中，有多种方式可以实现组件间的传值。以下是其中几种常用的方法：

  • 父子组件传值：父组件通过props属性将数据传递给子组件，子组件通过props接收并使用这些数据。在父组件中使用子组件时，通过在子组件标签上绑定属性的方式将数据传递给子组件。

    例如，在父组件中使用子组件时：

    <template>
  <div>
    <child-component :data="value"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value: 'Hello Vue!'
    };
  }
};
</script>

    在子组件中使用props接收父组件传递的数据：

    <template>
  <div>
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  props: {
    data: String
  }
};
</script>

  • 兄弟组件传值：如果两个组件没有直接的父子关系，可以使用Vue实例作为中介来传递数据。在Vue中，可以使用事件总线来实现兄弟组件之间的通信。

    首先，在main.js文件中创建一个事件总线：

    import Vue from 'vue';

Vue.prototype.$bus = new Vue();

    然后，在发送数据的组件中，使用$emit方法触发一个自定义事件，并传递数据：

    <template>
  <div>
    <button @click="sendData">发送数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$bus.$emit('data', 'Hello Vue!');
    }
  }
};
</script>

    最后，在接收数据的组件中，使用$on方法监听自定义事件，并在回调函数中处理接收到的数据：

    <template>
  <div>
    <p>{{ receivedData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedData: ''
    };
  },
  created() {
    this.$bus.$on('data', (data) => {
      this.receivedData = data;
    });
  }
};
</script>

  • 使用Vuex进行全局状态管理：Vuex是Vue官方提供的状态管理工具，可以实现组件间的数据共享。通过在Vuex的store中定义状态，然后在需要使用该状态的组件中进行读取和修改。

    首先，在main.js文件中创建并配置Vuex的store：

    import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    value: 'Hello Vuex!'
  },
  mutations: {
    updateValue(state, payload) {
      state.value = payload;
    }
  }
});

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

    然后，在组件中可以通过this.$store来访问store中的数据和方法：

    <template>
  <div>
    <p>{{ $store.state.value }}</p>
    <button @click="updateValue">更新数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateValue() {
      this.$store.commit('updateValue', 'New Value');
    }
  }
};
</script>

以上是Vue中几种常用的组件间传值的方法，根据实际需求选择合适的方式来进行数据传递。

2. Vue中如何进行父组件向子组件的传值？

在Vue中，可以使用props属性来实现父组件向子组件的传值。通过在父组件中使用子组件的标签时，绑定属性来传递数据。

首先，在父组件中，通过在子组件标签上绑定属性的方式将数据传递给子组件：

<template>
  <div>
    <child-component :data="value"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value: 'Hello Vue!'
    };
  }
};
</script>

然后，在子组件中使用props接收父组件传递的数据，并在模板中使用该数据：

<template>
  <div>
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  props: {
    data: String
  }
};
</script>

通过以上方式，父组件可以将数据传递给子组件，并在子组件中使用该数据。父组件中的数据变化时，子组件中的数据也会随之更新。

3. Vue中如何进行子组件向父组件的传值？

在Vue中，子组件向父组件传值可以通过自定义事件和$emit方法来实现。

首先，在子组件中，通过$emit方法触发一个自定义事件，并传递数据：

<template>
  <div>
    <button @click="sendData">发送数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('data', 'Hello Vue!');
    }
  }
};
</script>

然后，在父组件中使用子组件时，通过在子组件标签上绑定自定义事件的方式来接收子组件传递的数据，并在父组件中定义处理该事件的方法：

<template>
  <div>
    <child-component @data="handleData"></child-component>
    <p>{{ receivedData }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    handleData(data) {
      this.receivedData = data;
    }
  }
};
</script>

通过以上方式，子组件可以将数据通过自定义事件传递给父组件，并在父组件中接收和处理该数据。父组件中的数据随着子组件的触发而更新。

文章标题：vue是如何组建传值的，发布者：worktile，转载请注明出处：https://worktile.com/kb/p/3687378

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
worktile的头像worktile
0 0

发表回复

登录后才能评论
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部
                                                                                                                           PingCode智能化研发管理工具，25人以下免费使用。