vue中的组件

最新推荐文章于 2024-05-30 15:07:12 发布

小二，来杯奶茶

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量1.7k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_46030955/article/details/123782201

版权

1、什么是组件？

实现局部代码交互和功能的集合

组件就是一个可复用的vue实例

2、组件怎么写？

注册一个全局组件

<div id="app">
      <tab-button></tab-button>
    </div>
注册一个全局组件
        Vue.component('tab-button',{
            data:function(){
                return{
                    count : 0
                }
            },
            template:`  <button @click="count++">You clicked me {{ count }} times</button>`
        });
       new Vue({
            el:'#app',
            data:{

            },
            components:{
               tab-button
            }
        })

注册一个局部组件

<div id="app">
       <abc></abc>
    </div>
var abc = Vue.extend({
            data:function(){
                return{
                    count : 0
                }
            },
            template:` <div> <button @click="count++">You clicked me {{ count }} times</button> </div>`
        })


      new Vue({
            el:'#app',
            data:{

            },
            components:{
                abc
            }
        })

3、组件的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
    <div id="app">
        <app></app>
    </div>
    <script>
        var student =Vue.extend({
            data(){
                return{
                    name:'邓',
                    age:18,
                }
            },
            template:`<div>
           <h3>{{name}}</h3>
            <h3>{{age}}</h3>
        </div>`
        })
        var teacher =Vue.extend({
            data(){
                return{
                    name:'王',
                    subject:"vue课程",
                }
            },
            template:`<div>
            <h3>{{name}}</h3>
            <h3>{{subject}}</h3>
        </div>`
        })
        var school = Vue.extend({
            data(){
                return{
                    name:"北京大学",
                    adress:"北京",
                }
            },
            components:{
                 student,
                 teacher
            },
            template:`
            <div>
            <h1>{{name}}</h1>
            <h1>{{adress}}</h1>
            <student></student>
            <teacher></teacher>
        </div>`
        })
        var app = Vue.extend({
            data(){
                return{

                }
            },
            components:{
                school
            },
            template: `<div>
            <school></school>
        </div>`
        })
        new Vue({
            el:'#app',
            data:{

            },
            components:{
                app
            },
            
        })
    </script>
</body>
</html>

4、注意事项

1、组件中与new vue接收相同的属性例如data、methods、compted等，除了el

2、在组件中data必须写成函数形式，

3、多个组件被复用时，每一个不同的组件维护各自的数据

4、每使用一次组件返回的都是全新的Vuecomponent

5、组件的本质其实是一个叫Vuecomponent的构造函数

6、组件的配置中this的指向时Vuecomponent实例对象

7、组件的实例对象可以访问到vue原型上的属性、方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
   <div id="app">
    <school></school>
    <hello></hello>

    <button @click="myfunction">点击生成看看是否是一个Vuecomponent构造函数</button><br/>
    <button @click="myfunction1">点击看看是否生成的vuecomponent是否是一个</button><br/>
   
   </div> 
   <script>
       //vm:vue的实例对象
       //vc：组件实例对象（Vuecomponent的实例对象）
       var school = Vue.extend({
           data() {
               return {
                   name:"清华大学",
                   adress:"北京"
               }
           },
           template:`
           <div>
           <h1>{{name}}</h1>
           <h1>{{adress}}</h1>
           </div>
           `
       })
       var hello = Vue.extend({
           data() {
               return {
                   name:"北京大学",
                   adress:"北京"
               }
           },
           methods:{
               //在组件中，this的指向都是Vuecomponent的实例对象，
               //并且结构和vue实例对象的结构一模一样，但是vue实例对象可以包含多个Vuecomponent
               myfunction2(){
                   console.log(this)
               }
           },
           template:`
           <div>
           <h1>{{name}}</h1>
           <h1>{{adress}}</h1>
           <button @click="myfunction2">点击查看this的指向</button><br/>
           </div>
           `
       })
       new Vue({
           el:'#app',
           data:{

           },
           methods:{
               //组件本身就是一个Vuecomponent构造函数，时Vue.extend（）生成的
               myfunction(){
                console.log(school)
               },
               //每次调用Vue.extend函数返回的都是全新的Vuecomponent构造函数
               myfunction1(){
                   console.log(school === hello)
               },
               
           },
           components:{
            school,
            hello
           }
       })
   </script>
</body>
</html>

实现页面

验证效果

小二，来杯奶茶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的组件

1、什么是组件？实现局部代码交互和功能的集合组件就是一个可复用的vue实例2、组件怎么写？注册一个全局组件<div id="app"> <tab-button></tab-button> </div>注册一个全局组件 Vue.component('tab-button',{ data:function(){ return{
复制链接

扫一扫