vue跳轉怎麼傳值

Vue 中數據傳遞有兩種主要方式：props：單向數據綁定，從父組件傳遞數據給子組件。事件：使用事件和自定義事件在組件之間傳遞數據。

Vue 中數據的傳遞

Vue.js 中的數據傳遞主要有兩種方式：

1. props

props 是一種單向的數據綁定方式，從父組件向子組件傳遞數據。父組件通過props屬性聲明需要傳遞的數據，子組件通過props接收這些數據。

示例：

父組件：

 <code class="html"><template> <child-component :message="message"></child-component> </template> <script> export default { data() { return { message: &#39;Hello, Vue!&#39; } } } </script></code>

子組件：

 <code class="html"><template> <p>{{ message }}</p> </template> <script> export default { props: [&#39;message&#39;] } </script></code>

2. 事件和自定義事件

Vue.js 中可以通過事件傳遞數據，包括原生事件和自定義事件。原生事件使用v-on指令監聽，自定義事件使用$emit方法觸發。

示例：

父組件：

 <code class="html"><template> <button>点击</button> </template> <script> export default { methods: { handleClick() { this.$emit(&#39;custom-event&#39;, &#39;传递的数据&#39;) } } } </script></code>

子組件：

 <code class="html"><template> <div> {{ data }} </div> </template> <script> export default { methods: { handleCustomEvent(data) { this.data = data } }, data() { return { data: &#39;&#39; } } } </script></code>

除了這兩種方式外，Vue.js 還有其他傳遞數據的方法，例如Vuex 、 localStorage和sessionStorage 。選擇哪種方法取決於具體場景和數據傳輸的需求。

以上是vue跳轉怎麼傳值的詳細內容。更多資訊請關注PHP中文網其他相關文章！