VUE组件

最新推荐文章于 2023-07-19 15:52:55 发布

B~~

最新推荐文章于 2023-07-19 15:52:55 发布

阅读量164

点赞数

分类专栏： vue 组件文章标签： vue 组件化

本文链接：https://blog.csdn.net/Q111900/article/details/109225291

版权

vue 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

组件

2 篇文章 0 订阅

订阅专栏

VUE组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子

（一）注册组件步骤

1、创建组件构造器对象

const cpmC = Vue.extend({
        template: `
        <div>
            <h2>我是标题</h2>
            <p>dsfdsaf</p>
            <p>dsafaghytuyt</p>
        </div>`
    })

2、注册组件

//全局组件，可以在多个Vue的实例下面使用
 Vue.component('my-cpn',cpmC)

//局部注册组件
const app = new Vue({
        el: '#app',
        components:{
            //cpn:是使用组件时的标签名
            cpn:cpmC
        },
        methods: {

        },
    })

3、使用组件

 <div id="app">
        <!-- 3.使用组件 -->
       <my-cpn></my-cpn>
       <cpn></cpn>
</div>

（二）父组件子组件使用

<body>
    <div id="app">
        <cpn2></cpn2>
    </div>
</body>

<script>
//语法糖写法
const dpnC1 = Vue.extend({
        template: `
        <div> 
            <h2>我是标题1</h2>
            <p>dsgsfg</p>
            <p>gfhghfd</p>
        </div>
        `
    })
const app = new Vue({
        el: '#app',
        data: {
            message: 'as',
        },
        methods: {

        },
        components: {
            // "cpn2": dpnC2,
            "cpn2": {
                template: `
        <div> 
            <h2>我是标题2</h2>
            <p>dsgsfg</p>
            <p>gfhghfd</p>
            <cpn1></cpn1>
        </div>
        `,
                //cpn2是父组件，cpn1是子组件
                components: {
                    cpn1: dpnC1
                }
            }
        }
    })
</script>

（三）组件模板分离

<body>
    <div id="app">
        <my-cpn></my-cpn>
        <my-cpn2></my-cpn2>
    </div>
    <!-- 1.script标签 类型：text/x-template -->
    <script type="text/x-template" id="myCpn">
        <div>
            <h2>我是标题</h2>
            <p>dsfdsaf</p>
            <p>dsafaghytuyt</p>
        </div>
    </script>
    <!-- 2.template标签 -->
    <template id="cpn">
        <div>
            <h2>{{title}}</h2>
            <p>dsfdsaf</p>
            <p>dsafaghytuyt</p>
        </div>
    </template>
</body>
<script src="../js/vue.js"></script>
<script>
    Vue.component('my-cpn', {
        template: "#myCpn",
    })
    Vue.component('my-cpn2', {
        template: "#cpn",
        //组件数据存放：data数据必须是函数
        data() {
            return {
                title: "我是标题2"
            }
        }
    })

    const app = new Vue({
        el: '#app',
        data: {
            message: 'as',
        },
        methods: {

        },
    })
</script>