VUE 组件

最新推荐文章于 2022-03-07 00:27:31 发布

jing_jing95

最新推荐文章于 2022-03-07 00:27:31 发布

阅读量80

点赞数

分类专栏：前端 vue

本文链接：https://blog.csdn.net/jing_jing95/article/details/108744815

版权

前端同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

一、组件介绍

1.减少代码量

2.代码复用

二、组件注册

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="root">
    <input type="text" v-model:"inputValue">
    <button @click:"handleBtnClick"></button>
    <ul>
        <todo-item v-bind:content:"item"
                   v-for:"item in list"></todo-item>
    </ul>
    </div>
</body>
//kebab-case:短横线分隔命名
//pascal-case：驼峰式命名
//component不能在html中写驼峰式命名，会报错，如果component里用了驼峰式命名，在html中改成短横线命名
<script type = text/javascript>
//1.全局注册
    Vue.component('todoItem',{
        template:'<li>hello world</li>'
    }) 
    var vm = new Vue({
        el:'#root',
        data:{
            list:[],
            inputValue:''
        },
        method:{
            handleBtnClick(){
                this.list.push(this.inputValue);
            }
        }
    })
</script>
</html>

component不能在html中写驼峰式命名，会报错，如果component里用了驼峰式命名，在html中改成短横线命名

1.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="root">
    <input type="text" v-model:"inputValue">
    <button @click:"handleBtnClick"></button>
    <ul>
        <!--1. 静态传值-->
        <todo-item test:"hellobilibili"></todo-item>
    </ul>
    </div>
</body>

<script type = text/javascript>
//1.全局注册
//定义的子组件 todoItem
    Vue.component('todoItem',{
        props:['test'],//在这里接收属性
        template:'<li>{{test}}</li>'
    }) 
//root这个是父组件，表示当前vue对象接管了该div区域
    var vm = new Vue({
        el:'#root',
        data:{
            list:[],
            inputValue:''
        },
        method:{
            handleBtnClick(){
                this.list.push(this.inputValue);
            }
        }
    })
</script>
</html>

1.2 动态传值

v-bind双向绑定变量

<!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="root">
    <input type="text" v-model:"inputValue">
    <button @click:"handleBtnClick"></button>
    <ul>
        <!--1. 静态传值-->
        <!--
            <todo-item test:"hellobilibili"></todo-item>
        -->
        <!--2. 动态传值-->
        <todo-item v-bind:content:"item"
                   v-for:"item in list"></todo-item>
    </ul>
    </div>
</body>

<script type = text/javascript>
//1.全局注册
//定义的子组件 todoItem
    Vue.component('todoItem',{
        props:['content'],//在这里接收属性
        template:'<li>{{content}}</li>'
    }) 
//root这个是父组件，表示当前vue对象接管了该div区域
    var vm = new Vue({
        el:'#root',
        data:{
            list:[],
            inputValue:''
        },
        method:{
            handleBtnClick(){
                this.list.push(this.inputValue);
            }
        }
    })
</script>
</html>

2 局部注册

<!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="root">
    <input type="text" v-model:"inputValue">
    <button @click:"handleBtnClick"></button>
    <ul>
        <!--1. 静态传值-->
        <!--
            <todo-item test:"hellobilibili"></todo-item>
        -->
        <!--2. 动态传值-->
        <todo-item v-bind:content:"item"
                   v-for:"item in list"></todo-item>
    </ul>
    </div>
</body>

<script type = text/javascript>
//2.局部注册：Javascript对象注册
    var TodoItem={
        props:['content'],
        template:'<li>{{content}}</li>
    }

    var vm = new Vue({
        el:'#root',
        components:{//在这里注册局部组件
            'todo-item':TodoItem//todo-item是注册的组件名，TodoItem是js对象名
        },
        data:{
            list:[],
            inputValue:''
        },
        method:{
            handleBtnClick(){
                this.list.push(this.inputValue);
            }
        }
    })
</script>
</html>

3 点击删除

<!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="root">
    <input type="text" v-model:"inputValue">
    <button @click:"handleBtnClick"></button>
    <ul>
        <!--1. 静态传值-->
        <!--
            <todo-item test:"hellobilibili"></todo-item>
        -->
        <!--2. 动态传值-->
        <todo-item v-bind:content:"item"
                   v-bind:index:"index"
                   v-for:"(item,index) in list"></todo-item>
    </ul>
    </div>
</body>

<script type = text/javascript>
//2.局部注册：Javascript对象注册
    var TodoItem={
        props:['content','index'],
        template:'<li>{{content}}--{{index}}</li>
    }

    var vm = new Vue({
        el:'#root',
        components:{
            'todo-item':TodoItem
        },
        data:{
            list:[],
            inputValue:''
        },
        method:{
            handleBtnClick(){
                this.list.push(this.inputValue);
            }
        }
    })
</script>
</html>