组件的简单使用

篆愁君的烦恼

已于 2022-06-07 15:37:19 修改

阅读量568

点赞数

分类专栏： Vue 文章标签： vue.js javascript

于 2022-06-07 15:37:12 首次发布

本文链接：https://blog.csdn.net/m0_52228992/article/details/125163274

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、什么是组件

组件是构成页面中的独立结构单位，可以减少代码重复编写，降低耦合程度。组件主要以页面结构的形式存在，不同组件之间可以交互。

2、全局注册组件和局部注册组件

全局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
</head>
<body>
<script src="../lib/vue.js"></script>
<div id="app">
<my-component></my-component>
</div>
<div id="app1">
    <my-component></my-component>
</div>
<script>
    //Vue.component有两个参数，第一个参数是自定义组件名，第二个参数是组件的配置对象
    Vue.component('my-component',{
        data(){
            return{
                str:"这句话会不会显示"
            }//这一部分是固定用法，是return函数，作用于template
        },
        template:'<p>{{str}}</p>' //这个属性是组件的必有属性，值为字符串形式来代表应用模板，且字符串必须有唯一的根标签，否则将保错
    });
    let MyVue=new Vue({
        el:"#app"
    });
    let MyVue1=new Vue({
        el:"#app1"
    });
</script>
</body>
</html>

局部：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件1</title>
</head>
<body>
<script src="../lib/vue.js"></script>
<div id="app">
    <my-component></my-component>
    <myComponent></myComponent>
</div>
<script>
    let my1={
        template: "<p>这段话是否能够显示1</p>"
    };
    let MyVue=new Vue({
        el:"#app",
        components:{myComponent:my1}
        //这里的myComponent就是组件名，可能你会好奇，上面和这个不一样，因为浏览器默认html标签不区分大小写，解析默认小写，
        // 而myComponent无法直接使用被转化成my-component,直接使用可能出现下面图片错误
        //另外这里的组件名不能使用my-component，可以使用驼峰命名法myComponent
    })
</script>
</body>
</html>

3、template模板

【提前说明】这里的template是独立出来的，可以认为是与组件相关联的组件或是另类字符串的表示，与上面的要在属性里面不同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>template模板</title>
</head>
<body>
<script src="../lib/vue.js"></script>
<div id="app">
<my-component></my-component>
</div>
<template id="tem">//组建格式，映射到id为app的标签内，这需要写在它的标签外
    <p>{{str}}</p>
</template>
<script>
    Vue.component("my-component",{
        template:'#tem',//限定template的标签
        data(){
            return{
                str:"这能不能显示",
            }
        }
    });
    let myVue=new Vue({
        el:"#app",
    });
</script>
</body>
</html>

4、组件的数据传输

父组件传值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props</title>
</head>
<body>
<script src="../lib/vue.js"></script>
<div id="app">
    <my-component name="可以显示"></my-component>
</div>
<script>
    let my1={
        props:['name'],
        template: "<p>这段话是否能够显示<br>{{name}}</p>"
    };
    let MyVue=new Vue({
        el: "#app",
        components: {myComponent: my1}
    })
</script>
</body>
</html>

子组件传值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$emit</title>
</head>
<body>
<script src="../lib/vue.js"></script>
<div id="app">
    <my-component @change="change"></my-component>//须通过子组件进行触发即“@change=‘change’”
    获取到<input type="text" v-model="message">
</div>
<template id="tem">
    <div>
        <input type="text" v-model="mes">
        <button @click="send">发送</button>
    </div>
</template>
<script>
    let my1={
        props:['name'],
        data(){
            return{
                mes:"这是子组件的"
            }
        },
        template: "#tem",
        methods:{
            send(){
                this.$emit('change',this.mes);//第一个参数是自定义触发，第二个参数是自定义事件的参数
            }
        }
    };
    let MyVue=new Vue({
        el: "#app",
        data:{
          message:''
        },
        components: {myComponent: my1},
        methods: {
            change(mes){//这里是自定义触发的事件，参数直接传到这
                this.message=mes;
            }
        }
    })
</script>
</body>
</html>

参考资料：人民邮电出版社Vue.js前端开发实战