Vue组件

最新推荐文章于 2022-08-04 22:15:28 发布

你是阳光和雨交界最美的颜色

最新推荐文章于 2022-08-04 22:15:28 发布

阅读量175

点赞数

分类专栏： To_Study

本文链接：https://blog.csdn.net/StudyLww/article/details/90745925

版权

To_Study 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue组件

明明vue已经那么完美了，为什么还要学习Vue呢？

这是为了实现高度封装和高度可复用。

一、注册

使用Vue组件需要先进行注册

注册分为三种方式即：全局注册、局部注册和嵌套注册

1、全局：

定义全局组件要定义在Vue实例前
定义全局组件的语法格式：

<script>
    Vue.component('组件名称', {
        template: `封装的html代码`,
    });
</script>

要调用Vue实例的html的内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>
    <script src="js/vue-2.5.16.js"></script>
</head>
<body>

<div id="app">
    <ocean></ocean>
</div>
    <script>
        Vue.component('ocean',{
            template:'<h5>lalalalal</h5>'
        })
        var vue_app = new Vue({
//            绑定
            el:'#app'
        });

    </script>
</body>
</html>

想要使用我们自定义的组件m，只需要在绑定的标签中以标签的格式输出组件的名称即可

2、局部

局部定义组件和全局定义一样要定义在Vue实例前，它的语法是：

<script>
    var 组件名称 = {
        template: `封装的html代码`
    }
</script>

注意，在局部注册中我们需要在实例中声明components{组件的名称，}
即：

<script>
    var vue_app = new Vue({
        el: '#app',
        components: {
            组件名称,
        }
    })
</script>

在HTML中的调用语法：需要写在Vue的实例的HTML内部

在使用局部注册，在实例中声明组件名称时如果在组件名称的下面出现红色的波浪线，这个时候不要慌，请查看自己的配置中是否启用ES6语法，在pycharm中默认是启用javascrtpt的ES5语法。
具体路径为：File---->setting----->Languages&Frameworks----->JavaScript

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部注册</title>
    <script src="js/vue-2.5.16.js"></script>
</head>
<body>
    // 定义一个id为app的div标签
    <div id="app">
        <ocean></ocean>
    </div>
    <script>
        // var +组件名称={ }
        var ocean = {
            # 封装的html代码
            template:'<h6>请问你是谁</h6>'
        };
        // 创建的实例对象
        var app_ocean = new Vue({
            el:"#app",
            // 声明组件，在这里写如下代码，即可在div标签中调用名为ocean的标签，输出的内容为注册时封装的html代码
            components: {
                ocean,
            }

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

3、嵌套

组件可以进行嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套</title>
    <script src="js/vue-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <sea_2></sea_2>
    </div>
    <script>
        // 定义局部
        var ocean = {
            template:'<h5>局部定义</h5>',
        };
        Vue.component('sea_2',{
            template:'<ocean></ocean>',
            // 注意这里的components和定义全局时末尾时多了一个s
            components:{
                ocean,
                //<ocean></ocean>
            }
        });

        var vue_app=new Vue({
            el:'#app',
        });
    </script>
</body>
</html>

二、特殊属性

在vue组件中有几个特殊的属性，像data、props、单根元素以及经常会遇到的事件
1、data

在组件中，data是一个函数，而不是我们在js中使用的字典了，并且函数必须返回一个字典
######data代码示例：

        data:function () {
            return {
                '数据键':'数据值',
                ...
            }
        },

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data</title>
    <script src="js/vue-2.5.16.js"></script>
</head>
<body>

    <div id="app">
        <ocean></ocean>
    </div>


    <script>
        // 注册全局组件
        Vue.component('ocean',{
            // template：封装的html代码
            template:'<h1>你好啊啊啊啊啊{{title}}</h1>',
            // 特殊的data属性
             data:function () {
                return {
                    // title:键名   后面是值
                    title:'组件中data属性'
                }
            }
        });
        var vue_app = new Vue({
            el:'#app',
        });
    </script>
</body>
</html>

2、props

在组件中通过props属性可以为组件标签提供属性
props后面是一个列表，里面放着的是一个个的属性名称

props：['属性名称'，......]

props代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props</title>
    <script src="js/vue-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <ocean abc="vue"></ocean>
    </div>

    <script>
        Vue.component('ocean',{
            template:'<h1>嘿{{abc}}</h1>',
            // props里面盛放的是一个个的属性名称
            props:['abc',]
        })

        var vue_app = new Vue({
            el:'#app',
        });
    </script>
</body>
</html>

3、单个根元素

组件的template中只能包括一个根元素标签，如果需要写多个标签时，可以使用更高一级的标签将之包裹嵌套起来即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.5.16.js"></script>

</head>
<body>
<div id="app">
    <h1_1></h1_1>
</div>

<script>
    Vue.component('h1_1', {
//        template:'<div><h1>123</h1>' +
//        '<h2>456</h2></div>'
        template: `
            <div>
                <h1>123</h1>
                <h2>456</h2>
            </div>
            `
    });

    var vue_app = new Vue({
        el: '#app',
    });
</script>
</body>
</html>

在vue中可以使用``来将多行代码包裹起来，否则就会出现字符串相加的现象如下：

    Vue.component('h1_1', {
        template:"<div><h1>123" +
        "</h1><h2>456" +
        "</h2></div>"
    });

4、事件

调用组件时自定义事件：

<vue_h1 @自定义事件='处理函数'></vue_h1>

在组件中定义系统事件，调用自定义的事件：

this.$emit('自定义事件'，参数)；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script src="js/vue-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <ocean @say="shijian"></ocean>
</div>

<script>
    <!--局部注册组件-->
    var ocean = {
        // 封装的HTML代码
        template:`<div>
                  <input type="button" value="组件按钮" @click="hey">
                  </div>`,
        // 自定义事件
        methods:{
            hey:function () {
                // $emit('自定义的参数')
                this.$emit('say')
                // 这里的this指的是这个vue组件的对象，即ocean，可以在浏览器中打断点，通过console控制台打印输出
            }
        },
    };
    <!--先创建对象-->
    var vue_app = new Vue({
        // 绑定标签
        el:"#app",
        //注册组件
        components:{
          ocean
        },
        // 定义弹出事件
        methods:{
            shijian:function () {
                alert('事件弹出成功啊啊啊啊啊啊')
            }
        }
    });
</script>
</body>
</html>

你是阳光和雨交界最美的颜色

关注

0
点赞
踩
0

收藏

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

Vue组件明明vue已经那么完美了，为什么还要学习Vue呢？这是为了实现高度封装和高度可复用。一、注册使用Vue组件需要先进行注册注册分为三种方式即：全局注册、局部注册和嵌套注册1、全局：定义全局组件要定义在Vue实例前定义全局组件的语法格式：<script> Vue.component('组件名称', { template: `封装...
复制链接

扫一扫