Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of vue componentization for you. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Global component

Vue submit / / Global component Vue.component ("TodoItem", {props: ["content"], template: "{{content}}"}) var app = new Vue ({el: "# root") Data: {list: []}, methods: {addTextFunc: function () {this.list.push (this.inputValue) this.inputValue = ""})

Local component

Vue submission / / partial component var TodoItem = {props: ['content'], template: "{{content}}"} var app = new Vue ({el: "# root" / / Register TodoItem component components: {TodoItem: TodoItem / / named TodoItem Also called TodoItem} in the instance, data: {list: []}, methods: {addTextFunc: function () {this.list.push (this.inputValue) this.inputValue = ""})

The child component and the parent component transmit data in both directions

Vue submission "v-bind:" can be abbreviated as ":" / / partial component var TodoItem = {props: ['content',' index'], / / declare (parent component passes value to child component, child component receives!) Abbreviation of / / v-on:click: @ click template: "{{content}}", methods: {handleItemClick () {/ / child component passes value to parent component (trigger event, parent component's @ delete= "handleItemDelete" is listening) this.$emit ("delete", this.index) / / not only triggers the delete time, but also takes this.index as a parameter to the parent component} var app = new Vue ({el: "# root", / / registers the TodoItem component components: {TodoItem: TodoItem / / named TodoItem Also called TodoItem} in the instance, data: {list: []}, methods: {addTextFunc: function () {this.list.push (this.inputValue) this.inputValue = ""} HandleItemDelete: function (index) {/ / receive the passed this.index / / delete all / / this.list = [] / / delete the clicked data (index identified as the current data) this.list.splice (index) 1)}) This is the end of the article on "case analysis of vue components". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.