Vue是一個流行的JavaScript框架,現在受到開發者的喜愛。Vue中的插槽是一種重要的功能,它允許在父組件和子組件之間共享內容。有時,我們需要在父組件和子組件之間交互變量,Vue允許使用自定義插槽變量實現這個目的。下面將在Vue中演示如何使用自定義插槽變量來實現變量交互。
首先,在父組件中定義一個slot標簽。slot標簽中使用v-bind綁定一個變量,該變量的值將從父組件傳遞到子組件:
<!-- Parent.vue --> <template> <child-component> <template v-slot:title="props"> {{ props.title }} </template> </child-component> </template> <script> import ChildComponent from "./Child.vue"; export default { components: { ChildComponent, }, }; </script>
在slot標簽上引用自定義插槽變量時,使用v-slot:title來定義一個名為title的插槽。在v-slot:title中,props參數指向從父組件傳遞的變量。在這個例子中,我們將使用一個叫做title的變量。
接下來,在子組件中引用slot標簽,并且使用插槽變量title,將變量從子組件傳遞回父組件:
<!-- Child.vue --> <template> <div> <input type="text" v-model="title" @change="updateTitle" /> </div> </template> <script> export default { data() { return { title: "", }; }, methods: { updateTitle() { this.$emit("update:title", this.title); }, }, }; </script>
在子組件中,使用v-model綁定一個名為title的變量,在用戶輸入時觸發updateTitle方法并調用this.$emit方法傳遞一個update:title事件以將title變量傳遞回父組件。
最后,在父組件中,使用v-on指令監聽子組件的update:title事件,更新父組件中的title變量:
<!-- Parent.vue --> <template> <div> <p>Title: {{ title }}</p> <child-component> <template v-slot:title="props"> {{ props.title }} </template> </child-component> </div> </template> <script> import ChildComponent from "./Child.vue"; export default { components: { ChildComponent, }, data() { return { title: "", }; }, methods: { updateTitle(newTitle) { this.title = newTitle; }, }, created() { this.$on("update:title", this.updateTitle); }, }; </script>
在父組件的created鉤子中,使用this.$on監聽update:title事件,當該事件觸發時,調用updateTitle方法并更新title變量。在模板中輸出title變量即可顯示最新的值。
上一篇json技術分析
下一篇vue自定義教學視頻