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

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">

        <my-cpn>my-cpn>
        <my-cpn>my-cpn>
    div>
    <script>
        //1、创建组件构造器对象
        const myComponent = Vue.extend({

            //ES6  Tab上方的按钮 `   `
            template: `
                

标题

我是

你好

`
}); //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: `
                

标题

我是

你好

`
}) const app = new Vue({ el:'#app' })
script> body>

模板分离


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


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


全局组件和局部组件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件和局部组件title>
    <script src="vue.js">script>
head>
<body>
<div id="app">
    
    <my-cpn>my-cpn>
    <my-cpn>my-cpn>
div>
<script>
    //1、创建组件构造器对象
    const myComponent = Vue.extend({
        template: `
                

标题h2

你好

`
}); //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,vue,vue.js,html)