Vue.js组件Component

最新推荐文章于 2024-02-08 10:28:07 发布

学习使我快乐——玉祥

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量335

点赞数

分类专栏： js 文章标签： vue

本文章作者主页，https://blog.csdn.net/qq_43319748，未经作者允许禁止转载，如有问题，欢迎指正！☺☺☺

本文链接：https://blog.csdn.net/qq_43319748/article/details/119665975

版权

js 专栏收录该内容

75 篇文章 3 订阅

订阅专栏

组件简介

1、组件可以理解成web页面的一个组成部分，该部分有自己的逻辑和功能的页面，但又能和其他类似的组件或者父组件相互配合，完成一个应用程序。

2、同时组件可以自由组合形成功能完整的界面。

3、当不想要某个组件或者想要替换某个组件的时候，可以进行删除和替换，而不影响整个应用程序的执行。

4、组件是Vue的核心，实际上它是可以复用的Vue实例，因此它与new Vue( )具有相同的选项。

组件创建的用法

方式一：

    var vm=Vue.extend({
        template:`<p>组件一</p>`,
        created() {
            console.log("创建组件成功");
        }
    });
    Vue.component('method1',vm);

方式二：

    Vue.component('method2',Vue.extend({
        template:`<p>组件二</p>`,
        created() {
            console.log("创建组件2成功");
        }
    }));

方式三：

    Vue.component('method3',{
        template:`<p>组件三</p>`,
        created() {
            console.log("创建组件3成功");
        }
    });

方法四：

先在在html里使用原生的<template>创建一个自定义内容，然后通过Vue.component去绑定其id。

<template id="four">
    <div>
        <p>组件四</p>
    </div>
</template>

     Vue.component('method4',{
        template:"#four",
        created() {
            console.log("创建组件4成功");
        }
    });

组件使用必须是在Vue实例的模板中，否则不会被解析。

<html>
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <method1></method1>
    <Method1></Method1>
    <method2></method2>
    <Method2></Method2>
    <method3></method3>
    <Method3></Method3>
    <method4></method4>
    <Method4></Method4>
</div>

<template id="four">
    <div>
        <p>组件四</p>
    </div>
</template>

<script type="text/javascript">
    var vm=Vue.extend({
        template:`<p>组件一</p>`,
        created() {
            console.log("创建组件1成功");
        }
    });
    Vue.component('method1',vm);

    Vue.component('method2',Vue.extend({
        template:`<p>组件二</p>`,
        created() {
            console.log("创建组件2成功");
        }
    }));

    Vue.component('method3',{
        template:`<p>组件三</p>`,
        created() {
            console.log("创建组件3成功");
        }
    });

    Vue.component('method4',{
        template:"#four",
        created() {
            console.log("创建组件4成功");
        }
    });
    new Vue({
        el:"#app",
        data:{ },
        methods:{ }

    });
</script>
</body>
</html>

组件嵌套：

    var child=Vue.extend({
        template:`<div>A custom component</div>`
    });

    var parent=Vue.extend({
        template:`<div>Parent Component:  <child-component></child-component></div>`,
        components:{
            'child-component':child
        }
    });

    Vue.component('parent-component',parent);

1、定义子组件，

2、定义父组件，在父组件的模板里注册子组件，并给子组件自定义标签名，

3、然后在父组件模板引用刚自定义名称标签，

4、注册父组件，为父组件自定义标签名。

5、在vue实例的模板中引用父组件标签名。

注意：如果一个组件被一个Vue实例引用，

如果局部引用，需要在Vue实例内部通过components选项注册，

如果是全局引用，那么在注册该组件的时候一定要在实例创建之前，否则无法加载。

组件切换

任意起名标签aaa,bbb,adasd都可以，然后使用它的is属性，属性值为注册的组件名称

需要在Vue实例对应的模板中使用，

你会发现对应的aaa标签因为is属性填写的组件名，而自动换成了对应的组件内容。

因此我们可以通过绑定is属性，然后使用变量，动态切换组件内容。

<div id="app">
    <method1></method1>
    <Method1></Method1>
    <method2></method2>
    <Method2></Method2>
    <aaa :is="comp"></aaa>
    <bbb :is="comp"></bbb>
    <button @click="change">切换</button>
</div>

<script type="text/javascript">
    var vm=Vue.extend({
        template:`<p>组件一</p>`,
        created() {
            console.log("创建组件1成功");
        }
    });
    Vue.component('method1',vm);

    Vue.component('method2',Vue.extend({
        template:`<p>组件二</p>`,
        created() {
            console.log("创建组件2成功");
        }
    }));
    
    new Vue({
        el:"#app",
        data:{
            comp:'method1'
        },
        methods:{
            change(){
                if(this.comp==='method1'){
                    this.comp='method2';
                }else{
                    this.comp='method1';
                }
            }
        }

    });
</script>

组件中的data

组件可以拥有自己的数据，因为它也有Vue实例的选项。

组件的data是一个带返回值的方法。而实例可以是一个对象，或者简单变量。

组件的data必须返回一个对象，可以把自定义参数以参数名 : 参数值的形式放入对象内。

    var vm=Vue.extend({
        template:`<p>组件一msg={{msg}},msg2={{msg2}}</p>`,
        created() {
            console.log("创建组件1成功");
        },
        data(){
            return {
              msg:"132",
              msg2:"1456"
            };
        }
    });

组件通信：

参考Vue入门（一）的组件通信

补：组件的props属性在组件通信中，例如接收数据的时候需要提前定义好接收数据类型和默认值，防止接收不到信息导致模板加载异常。

props:{
  参数名:String
  参数名：{
      type:Object,
      default: { }      
  }
}

学习使我快乐——玉祥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js组件Component

组件简介1、组件可以理解成web页面的一个组成部分，该部分有自己的逻辑和功能的页面，但又能和其他类似的组件或者父组件相互配合，完成一个应用程序。2、同时组件可以自由组合形成功能完整的界面。3、当不想要某个组件或者想要替换某个组件的时候，可以进行删除和替换，而不影响整个应用程序的执行。4、组件是Vue的核心，实际上它是可以复用的Vue实例，因此它与new Vue( )具有相同的选项。组件创建的用法方式一： var vm=Vue.extend({ templa
复制链接

扫一扫

专栏目录