Vue组件（详解）

编程语言 2023-08-22 20:02:36 阅读次数: 0

目录

组件：

全局组件：

在HTML页面声明template：

局部组件：

局部组件第一种方式：

局部组件第二种方式：

插槽slot：

匿名插槽：

具名插槽：

父子组件通信：

简单粗暴型$refs和$parent:

$refs父组件获取子组件数据：

 $parent子组件获取父组件数据：

正规型父子通信：

子组件获取父组件数据：

父组件获取子组件数据：

非父子组件的通信：

混入mixin：

局部混入：

全局混入：

最后送大家一句话：

官网地址：组件注册 — Vue.js (vuejs.org)

组件：

组件可以简单的理解为模块化的单元，Vue组件能够提高代码重用性的。使用组件可以解决频繁更改需求的问题

将来每一个组件都是一个单独的文件，最终运行都会放在一个页面上。

组件都有的三步骤：声明、注册、使用；全局组件除外，因为全局组件声明的时候就已经注册了

全局组件：

指在不同作用域内均可使用的组件

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <hello></hello><!--使用-->
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    //声明加注册
    Vue.component("hello",{
        template:`<div>hello，{
   
   {name}}</div>`,
        data(){//这边也是可以加data以及其他的各种主属性
            return{
                name:"我是hello"
            }
        },
    })
    let app=new Vue({
        el:"#app"
    })
</script>
</html>

浏览器结果：

在HTML页面声明template：

当然局部组件也可以将template声明在HTML页面上，和全局的写法一样。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <hello></hello><!--使用-->
    </div>
    <template id="myhello">
        <div>hello，{
   
   {name}}</div>
    </template>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    //声明加注册
    Vue.component("hello",{
        template:"#myhello",//通过id选择器选择上面的id
        data(){
            return{
                name:"我是hello"
            }
        },
    })
    let app=new Vue({
        el:"#app"
    })
</script>
</html>

效果和刚开始的一样，我就不做演示了；此种方法在HTML页面写的时候有提示并且js里面也不会太乱，两种方法都行，喜欢用哪个就用哪个。

局部组件：

指只在定义该组件的作用域内可以使用的组件

局部组件第一种方式：

这次方式是声明注册在一起；这种方式不太建议使用，复用性不强并且js代码太多不方便查看

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <baibai></baibai><!--使用-->
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    let app=new Vue({
        el:"#app",
        components:{
            baibai:{//声明加注册
                template:`<div>拜拜{
   
   {name}}</div>`,
                data() {//data是在局部组件baibai里面
                    return {
                        name:"小明"
                    }
                },
            },
        },
    })
</script>
</html>

浏览器结果：

局部组件第二种方式：

这次方式是声明和注册分开使用；这种方式当前主流使用，复用性强并且简洁易懂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <baibai></baibai><!--使用-->
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var baibai={//声明
        template:`<div>拜拜{
   
   {name}}</div>`,
        data() {
            return {
                name:"小明"
            }
        }
    }
    let app=new Vue({
        el:"#app",
        components:{
            baibai//注册
        },
    })
</script>
</html>

上面注册我用的是简写；下面是写全的注册，基本上没人会把这个写全；

但是看到别人代码写全要能看懂

let app=new Vue({
    el:"#app",
    components:{
        baibai:baibai//注册
    },
})

插槽slot：

插槽（slot）其目的在于让组件的可扩展性更强，用来混合父组件的内容与子组件自己的模板

举个栗子： 比如说游戏中的武器可以镶嵌宝石，但是你要先有槽才能往里插宝石。

匿名插槽：

匿名插槽从字面意思来理解就是没有名字的插槽，特点是可以放置任何想要放的内容

 如果有多个插槽的话，使用匿名插槽页面就会有多个内容。

 代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <baibai>
            <div>我是插槽的内容</div><!--组件中间的内容-->
        </baibai><!--使用-->
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var baibai={//声明
        template:`<div>
                    <slot></slot>
                    拜拜{
   
   {name}}
                    <slot></slot>
                </div>`,
        data() {
            return {
                name:"小明"
            }
        }
    }
    let app=new Vue({
        el:"#app",
        components:{
            baibai//注册
        },
    })
</script>
</html>

 浏览器结果：

 因为写了两个插槽所以网页上输出了两个内容。

具名插槽：

具名插槽可以用一个特殊属性name，配置分发的内容，多个具名插槽可以有不同的名字

 具名函数在HTML代码列举了三种实现方式，萝卜白菜各有所爱，那个适合自己用那个

 代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <baibai>
            <!--第一种方式-->
            <div slot="tou">头部内容，旧语法，据说2.6.0后废弃，但是我2.7.0还能使用</div>
            <!--第二种方式-->
            <template #shenti>
                <div>
                    身体内容，新语法，缩写
                </div>
            </template>
            <!--第三种方式-->
            <template v-slot:jiao>
                脚部内容，新语法
            </template>
        </baibai><!--使用-->
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var baibai={//声明
        template:`<div>
                    <slot name="tou"></slot>
                    <slot name="shenti"></slot>
                    <div>拜拜{
   
   {name}}<div>
                    <slot name="jiao"></slot>
                </div>`,
        data() {
            return {
                name:"小明"
            }
        }
    }
    let app=new Vue({
        el:"#app",
        components:{
            baibai//注册
        },
    })
</script>
</html>

 浏览器结果：

父子组件通信：

在Vue中父子传值也是非常重要的一个操作，用好了代码编写起来会更简便。

简单粗暴型$refs和$parent:

这两个属性的作用是获取到子组件实例数组和父组件实例。

有了实例，就可以很方便的操作组件的属性和方法。

$refs父组件获取子组件数据：

$refs的使用需要，在子元素上通过ref属性声明自己的引用名

写法：

 <dawa ref="dawa"></dawa><!--子类的组件；ref声明的名称父组件中要通过它来获取数据-->

下面这个实例是在父组件写了一个按钮绑定点击事件来操作子组件的age数据让其加一

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        你好，{
   
   {name}}
        <dawa ref="dawa"></dawa><!--里面ref属性不写的话就传不了值-->
        <button type="button" @click="AgeFun">子类年龄+1</button><!--在父类里面写的按钮-->
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var dawa={
        template:`
            <div>
                子组件----{
   
   {childName}}--{
   
   {age}}
            </div>
        `,
        data() {
            return {
                childName:"大娃",
                age:18,
            }
        },
    }
    let app=new Vue({
        el:"#app",
        data() {
            return {
                name:"父类"
            }
        },
        methods: {
            AgeFun(){
                //拿到子组件的age值并且+1
                this.$refs.dawa.age=this.$refs.dawa.age+1
            }
        },
        components:{
            dawa
        },
    })
</script>
</html>

下面的这个结果是我点击了两次后的结果

浏览器结果：

 也可以在浏览器控制台获取父组件数据：

 $parent子组件获取父组件数据：

每个子组件只有一个父组件，子组件可以直接通过$parent就可以拿到父组件的数据不用声明去父组件名

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        你好，{
   
   {name}}
        <dawa></dawa>
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var dawa={
        template:`
            <div>
                子组件----{
   
   {childName}}--{
   
   {age}}
                <!--在子组件中写了一个按钮操作修改父类的name属性-->
                <button type="button" @click="updateFu">改父类名</button>
            </div>
        `,
        data() {
            return {
                childName:"大娃",
                age:18,
            }
        },
        methods: {
            updateFu(){
                this.$parent.name="爹爹"//点击后修改父类名称改为爹爹
            }
        },
    }
    let app=new Vue({
        el:"#app",
        data() {
            return {
                name:"父类"
            }
        },
        components:{
            dawa
        },
    })
</script>
</html>

下面的这个结果是我点过后的结果

正规型父子通信：

市面上大部分用的都是这种父子通信的方式，相对简单粗暴型会比较难理解一点。

子组件获取父组件数据：

传值属性名规则：

  • 父组件传的属性名最好不要和子组件的属性名一样
  • 父组件传的属性名不要出现大写，可以用英文下划线：”_“ 隔开

传值写法：

age属性是固定的值，name是单项数据绑定和父组件的name属性绑定

<dawa age="18" :name="name"></dawa>

获取写法：

在子组件中和data同级写props来获取

props:["age","name"]

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        你好，{
   
   {name}}
        <dawa age="18" :name="name"></dawa>
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var dawa={
        template:`
            <div>
                子组件----{
   
   {childName}}--{
   
   {age}}
                <br>
                <!--在子组件中将获取的属性简单演示一下-->
                父组件----{
   
   {age}}--{
   
   {name}}
            </div>
        `,
        data() {
            return {
                childName:"大娃",
                age:18,
            }
        },
        props:["age","name"],
    }
    let app=new Vue({
        el:"#app",
        data() {
            return {
                name:"父类"
            }
        },
        components:{
            dawa
        },
    })
</script>
</html>

浏览器结果：

父组件获取子组件数据：

父组件获取子组件数据，采用的是$emit，自定义事件的方式完成的。

父组件获取子组件数据需要做两件事情：

父组件在使用子组件时要给它绑定一个自定义事件

<!--@zidingyi是一个自定义事件，此事件会在后面在子组件注册-->
<dawa @zidingyi="fuFun" ></dawa>
//父组件里的方法
methods:{
    fuFun(val){
        // 拿到数据
        console.log(val);
    }
}

 子组件主动去出发这个事件并传递数据

//点击后给父组件传值
template:`
    <div>
        <button @click="butFun">给父组件传值</button>
    </div>
`,
//子组件里的方法
methods:{
    butFun(){
        // 子组件触发自定义事件zidingyi，同时传递数据
        this.$emit('zidingyi','数据1');
    }
}

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        你好，{
   
   {name}}
        <dawa @zidingyi="fuFun" ></dawa>
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var dawa={
        template:`
            <div>
                子组件----{
   
   {childName}}--{
   
   {age}}
                <button @click="butFun">给父组件传值</button>
            </div>
        `,
        data() {
            return {
                childName:"大娃",
                age:18,
            }
        },
        methods:{
            butFun(){
                this.$emit('zidingyi',this.childName);
            }
        }
    }
    let app=new Vue({
        el:"#app",
        data() {
            return {
                name:"父类"
            }
        },
        methods: {
            fuFun(val){
                console.log(val);
            }
        },
        components:{
            dawa
        },
    })
</script>
</html>

点击后，父类中的方法执行了，在控制台打印了子类的数据。

浏览器结果：

非父子组件的通信：

非父子组件通信就是子组件可以和另一个子组件传数据，子组件和父组件也可以互相传数据

通信分三步：

创建一个公共组件

Vue.prototype.$middleBus = new Vue();

发送方，在公共组件上，触发一个事件

this.$middleBus.$emit('zhidingyi','你好,我是'+this.childName);

接收方，监听公共组件上的这个zhidingyi事件，并接受数据

这个代码一般都写在生命周期钩子里，部署完只执行一次，mounted钩子是最适合的。

this.$middleBus.$on('zhidingyi',val=>{
     // 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向dawa
     console.log(this.childName+"接收到了值，值是："+val);//在控制台打印一下
});

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        你好，{
   
   {name}}
        <dawa></dawa>
        <erwa></erwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    //在Vue类的原型对象上，增加一个公共组件
    Vue.prototype.$middleBus = new Vue();
    var dawa={
        template:`
            <div>
                子组件1----{
   
   {childName}}--{
   
   {age}}
                <button @click="butFun">给其他人传值</button>
            </div>
        `,
        data() {
            return {
                childName:"大娃",
                age:18,
            }
        },
        methods: {
            butFun(){
                this.$middleBus.$emit('zhidingyi','你好,我是'+this.childName);
            }
        },
    }
    var erwa={
        template:`
            <div>
                子组件2----{
   
   {childName}}--{
   
   {age}}
            </div>
        `,
        data() {
            return {
                childName:"二娃",
                age:12,
            }
        },
        mounted() {
            this.$middleBus.$on('zhidingyi',val=>{
                // 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
                console.log(this.childName+"接收到了值，值是："+val);//在控制台打印一下
            });
        },
    }
    let app=new Vue({
        el:"#app",
        data() {
            return {
                name:"父类"
            }
        },
        components:{
            dawa,erwa
        },
    })
</script>
</html>

点击完以后，在控制台二娃接收到了数据

浏览器结果：

混入mixin：

提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项

局部混入：

混入组件要写在上面，要不会出现找不到报错

其他的组件可以直接使用混入组件的属性

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        你好，{
   
   {name}}
        <dawa></dawa>
        <erwa></erwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var sanwa= {
        data() {
            return {
                mixinname: '三娃',
            };
        },
        mounted() {
            console.log('我是混入的组件,我的名字叫:'+this.mixinname);
        },
    };
    var dawa={
        template:`
            <div>
                子组件1----{
   
   {childName}}--{
   
   {age}}--混入组件的名称：{
   
   {mixinname}}
            </div>
        `,
        data() {
            return {
                childName:"大娃",
                age:18,
            }
        },
        mixins:[sanwa]
    }
    var erwa={
        template:`
            <div>
                子组件2----{
   
   {childName}}--{
   
   {age}}
            </div>
        `,
        data() {
            return {
                childName:"二娃",
                age:12,
            }
        },
        mixins:[sanwa]
    }
    
    let app=new Vue({
        el:"#app",
        data() {
            return {
                name:"父类"
            }
        },
        components:{
            dawa,erwa
        },
    })
</script>
</html>

浏览器结果：

全局混入：

请谨慎使用全局混入，因为会使实例以及每个组件受影响

不管你要不要混入，它都给你混入了，用处不大基本上都不用。

写法：

Vue.mixin(myMixin);

最后送大家一句话：

猜你喜欢

转载自blog.csdn.net/zky__sch/article/details/132289586
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022