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

This article mainly introduces "A brief introduction to Vue.jS component parameter name naming and component attribute transformation". In daily operation, it is believed that many people have doubts about the simple introduction of Vue.jS component parameter name naming and component attribute transformation. Xiaobian consulted all kinds of materials and sorted out simple and useful operation methods. I hope it will be helpful for you to answer the question of "a brief introduction to the naming of Vue.jS component parameter names and the transformation of component properties". Next, please follow the editor to study!

The HTML feature is case-insensitive. Therefore, when the string template is not used, the camelCased (hump) named prop needs to be converted to the corresponding kebab-case (short horizontal line separated) naming:

Vue.component ('child', {/ / camelCase in JavaScriptprops: [' myMessage'], template:'{{myMessage}}'})

If you use a string template, there are no these restrictions.

This line is added before the uppercase letters of your hump-named parameter. Notice that the myMessage and my-message,vue.js in the above two code snippets are automatically converted.

If you pay attention to the browser's console output, there is also a message prompt.

If the prop parameter you define is not humped, you don't need to underline it and use the name of what you write.

PS: let's take a look at the parameter passing naming of the vue component

Background

Today, when passing values in the parent and child components, the value of the parent component can not be passed to the child component, and there is no value for breakpoint debugging. Later, open the console to find a warning message that uppercase letters are not recognized in the html statement. If you look at it again, the parameter is named after the hump, so it is true that capitalization is not supported in html, so when the parent component passes values, the parameter name should be connected with a short horizontal line.

Be careful

Example of error:

Correct example:

At this point, the study of "a brief introduction to the naming of Vue.jS component parameters and the transformation of component properties" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.