vue 组件——注册组件的基本步骤

注册组件的基本步骤

参考官网资料

1、创建组件构造器 调用Vue.extend()方法

2、注册组件 调用Vue.component()方法

3、使用组件 在Vue实例的作用范围内使用组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件基本步骤</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
<!--        3、使用组件-->
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
    </div>
    <script>
        //1、创建组件构造器对象
        const myComponent = Vue.extend({

            //ES6  Tab上方的按钮 `   `
            template: `
                <div>
                    <h2>标题</h2>
                    <p>我是</p>
                    <p>你好</p>
                </div>`
        });
        //2、注册组件

        //需要穿两个参数一个是注册组件的标签名（使用时的），一个是组件构造器（创建时的）
        Vue.component('my-cpn',myComponent)
        const app = new Vue({
            el:'#app'
        })
    </script>
</body>
</html>

省略extend

<body>
    <div id="app">
<!-- 使用组件-->
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
    </div>
    <script>
        Vue.component('my-cpn',{
            //ES6  Tab上方的按钮 `   `
            template: `
                <div>
                    <h2>标题</h2>
                    <p>我是</p>
                    <p>你好</p>
                </div>`
        })
        const app = new Vue({
            el:'#app'
        })
    </script>
</body>

模板分离

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;body&gt;
    &lt;div id="app"&gt;
&lt;!--    使用组件--&gt;
        &lt;my-cpn&gt;&lt;/my-cpn&gt;
        &lt;my-cpn&gt;&lt;/my-cpn&gt;
    &lt;/div&gt;


    <em>&lt;template id="cpn"&gt;
        &lt;div&gt;
            &lt;h2&gt;标题&lt;/h2&gt;
            &lt;p&gt;我是&lt;/p&gt;
            &lt;p&gt;你好&lt;/p&gt;
        &lt;/div&gt;
    &lt;/template&gt;</em>
    
    &lt;script&gt;
        Vue.component('my-cpn',{
           <em> template: '#cpn'</em>
            }
        )
        const app = new Vue({
            el:'#app'
        })
    &lt;/script&gt;
&lt;/body&gt;</code></pre>
<!-- /wp:code -->

全局组件和局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件和局部组件</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <!--        3、使用组件-->
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
</div>
<script>
    //1、创建组件构造器对象
    const myComponent = Vue.extend({
        template: `
                <div>
                    <h2>标题h2</h2>
                    <p>你好</p>
                </div>`
    });
    
    //2、注册全局组件，可以在多个Vue实例下面使用
    // Vue.component('my-cpn',myComponent)

    const app = new Vue({
        el:'#app',
        data:{
            message:'欢迎你！'
        },
        //2、局部组件，只能在当前的Vue实例下使用
        components:{
            'my-cpn':myComponent
        }
    })
</script>
</body>
</html>
# vue.js # html
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue