Home > Web Front-end > JS Tutorial > body text

How to use Vue.js components

php中世界最好的语言
Release: 2018-05-11 11:37:04
Original
2483 people have browsed it

This time I will bring you the method of using Vue.js components, what are the precautions when using Vue.js components, the following is a practical case, let's take a look.

 1. All Vue components are also Vue instances, divided into global components and local components. The registration method is as follows.

<p id="app">
    <my-component></my-component>
    <child-component></child-component></p><p id="example">
    <my-component></my-component>
    <!--在#app内局部注册的组件在此无法被渲染 -->
    <child-component></child-component></p><script src="https://cdn.jsdelivr.net/npm/vue"></script><script>Vue.component('my-component', { //全局组件,建议使用短横线分隔式命名组件  template: '<p>A custom component!</p>'})var Child = {
    template: '<p>A child component!</p>'}var app = new Vue({
    el: '#app',    
    components: { //局部组件,仅可在父作用域#app中使用
    'child-component':Child
    }  
})var example = new Vue({
    el:'#example'})</script>
Copy after login

 Note:

 a. Elements with restricted parent-child elements such as

    , ,
  • ,
  • , etc. , the component template cannot be used directly, and can be specified by the is attribute, such as . There are no such restrictions if you use a stringtemplate (a string literal that allows embedded expressions) from one of the following sources:

     1)

    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template