Shulou(Shulou.com)05/31 Report--

This article focuses on "how to implement global and local variables in Vue". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to implement global and local variables in Vue.

Local and local components

1. First define the component Vue.component ('component name', {component template object})

Note: do not use the native tag signature for the component name. if the component name is defined using the hump nomenclature, it will be called in lowercase after being divided by a dash.

For example: component-- > when mtText is used-- >

two。 Template for configuring a component Note: the template content of a component has one and only one root element

3. Called in the view layer, with double tags

4. A component is an independent scope, and it can also be regarded as a special vue instance, such as data, methods,computed, and so on.

Note: the data of the component is a function, and the function needs to return an object as the data of the component.

Global component case

/ / Global component Vue.component ('myComponent', {/ / 1. Component content / template template: 'header component hehe {{msg}}', data () {return {msg:'hello, component'}}, methods: {fn () {console.log (this.msg);}) let vm = new Vue ({el: "# app", data: {}, methods: {},})

Local component case

Haha {{item}} let vm = new Vue ({el: "# app", data: {}, methods: {}, / / Local subcomponent components: {/ / component name: {configuration item} "myComponent": {template:'#box1' Data () {return {msg: ""}, "myTest": {template: "# box2", data () {return {arr:

Component switching: method 1

Login registration Vue.component ("login", {template: "login component"}) Vue.component ("register", {template: "registration component"}) let vm = new Vue ({el: "# app", data: {flag: false}, methods: {},})

Component switching: method two

.red {color:red;} .v-enter {opacity:0; transform: translateX (150px);} .v-leave-to {opacity:0; transform: translateX (- 150px);} .v-enter-active, .v-leave-active {transition: all 0.5s; position: absolute } login and registration Vue.component ("login", {template: "login component"}) Vue.component ("register", {template: "registration component"}) let vm = new Vue ({el: "# app", data: {flag: "login"}, methods: {},})

The parent component passes values to the child component

{{fromfather}} data of the grandchild component let vm = new Vue ({el: "# app", data: {father:' ah ~ ~ this is the data of the parent component'}, methods: {}, / / Local subcomponent components: {/ / component name: {configuration item} "myComponent": {template:'#box1' Data () {return {msg: ""}}, / / add props: ['passed data'] / / Note: all data in the props in the component is passed to the child component through the parent component, and the data in props is read-only. Cannot modify props: ['fromfather'], methods: {change () {/ / this.fromfather = "modified"}}, / / partial subcomponent components: {' grandSon': {template:'#grandSon'}}) so far I believe you have a deeper understanding of "how to achieve global variables and local variables in Vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.