Vue学习笔记_组件化-阿里云开发者社区

🚙Vue组件化🚙

1.组件化

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='app'>
    <!-- //3.使用组件 -->
    <my-cpn></my-cpn>
</div>
<script src='../js/vue.js'></script>
<script>
    //1.创建组件构造器对象(es6 ` 可以换行不用+)
    const cpnC = Vue.extend({
        template: ` 
        <div>
            <h2>我是标题</h2>
            <p>我是内容，哈哈哈</p>
            <p>我是内容，呵呵呵</p>
        </div>`
    })
    //2.注册组件
    Vue.component('my-cpn',cpnC)
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        }
    })
</script>
</body>
</html>

3.注册组件步骤解析

注：必须在new Vue挂载的实例之下，才被渲染出来

4.全局组件和局部组件

<!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'>
    <cpn></cpn>
    <cpn></cpn>
</div>
<div id='app2'>
    <cpn></cpn>
</div>
<script src='../js/vue.js'></script>
<script>
    //1.创建组件构造器对象(es6 ` 可以换行不用+)
    const cpnC = Vue.extend({
        template: ` 
        <div>
            <h2>我是标题</h2>
            <p>我是内容，哈哈哈</p>
            <p>我是内容，呵呵呵</p>
        </div>`
    })
    //2.注册组件(全局组件),意味着可以在多个Vue的实例下面使用
    //Vue.component('my-cpn',cpnC)
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        },components: {
            //局部组件：
            // cpn 使用组件时候的标签名
            cpn:cpnC
        }
    });
    const app2 = new Vue({
        el:'#app2', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        }
    })
</script>
</body>
</html>

5.父组件和子组件

<!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'>
    <cpn2></cpn2>
</div>
<div id='app2'>
    <cpn></cpn>
</div>
<script src='../js/vue.js'></script>
<script>
    //1.创建第一个组件
    const cpnC1 = Vue.extend({
        template: ` 
            <div>
                <h2>我是标题1</h2>
                <p>我是内容，哈哈哈</p>
            </div>`
    });
    //2.创建第二个组件(父组件)
    const cpnC2 = Vue.extend({
        template: ` 
        <div>
            <h2>我是标题2</h2>
            <p>我是内容，呵呵呵</p>
            <cpn1></cpn1>
        </div>`,
        components:{
            cpn1:cpnC1
        }
    });
    //root组件
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        },components: {
            //2.注册：局部组件：
            // cpn 使用组件时候的标签名
            cpn2:cpnC2
        }
    });
</script>
</body>
</html>

6.注册组件的语法糖

7.模板的分类写法

全局组件分离

<!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'>
    <cpn></cpn>
</div>
<!-- 1.第一种 -->
<!-- <script type="text/x-template" id="cpn">
<div>
    <h2>我是标题</h2>
    <p>我是内容</p>
</div>
</script> -->
<!-- 2.第二种 -->
<template id="cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
    </div>
</template>
<script src='../js/vue.js'></script>
<script>
    //1.注册一个全局组件
    Vue.component('cpn',{
        template:`#cpn`
    })
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        }
    })
</script>
</body>
</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'>
    <cpn></cpn>
</div>
<!-- 1.第一种 -->
<!-- <script type="text/x-template" id="cpn">
<div>
    <h2>我是标题</h2>
    <p>我是内容</p>
</div>
</script> -->
<!-- 2.第二种 -->
<template id="cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
    </div>
</template>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        },
        components: {
            'cpn':{
                template:'#cpn'
            }
        }
    })
</script>
</body>
</html>

8.组件数据

注：组件内不能访问data数据，所以Vue组件因该有自己保存数据的地方

为什么必须是一个函数？

9.父子间通信

10.父级向子级传递

<!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'>
    <cpn :cmovies='movies' :cmessage='message'></cpn>
</div>
<template id="cpn">
    <div>
        <ul>
            <li v-for="item in cmovies">{{item}}</li>
        </ul>
        <p> {{cmessage}}</p>
        <h2>{{cmovies}}</h2>
    </div>
</template>
<script src='../js/vue.js'></script>
<script>
    // 父传子:props
    //局部组件
    const cpn = {
        template:'#cpn',
        //props: ['cmovies','cmessage']
        props:{
            //1.类型限制
            //cmovies:Array,
            //cmessage:String
            //2.提供一些默认值
            cmessage:{
                type:String,
                default:"aaaaa",
                required:true ///必传
            },
            //类型是对象或数组的时候，默认值必须是一个函数
            cmovies:{
                type:Array,
                default(){
                    return []
                }
            }
        }
    }
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            movies: ['海','王者','夏洛特']
        },
        components: {
            'cpn':cpn
        }
    })
</script>
</body>
</html>

数据验证的写法（props对象）

11.props驼峰标识

注：vue不支持直接的驼峰标识，需要进一步的转换，如：childMyMessage，需要在绑定的时候使用:child-my-message

<!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'>
    <cpn :cinfo='info' :child-my-message ="message"></cpn>
</div>
<template id="cpn">
    <!-- 如果有多个标签，需要外部有个div包起来 -->
    <div>
        <h2>{{cinfo}}</h2>
        <h2>{{childMyMessage}}</h2>
    </div>
</template>
<script src='../js/vue.js'></script>
<script>
    const cpn = {
        template: '#cpn',
        props:{
            cinfo:{
                type : Object,
                default(){
                    return {}
                }
            },
            childMyMessage:{
                type : String,
                default : ''
            }
        }
    }
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            info:{
                name:   'why',
                age:    18,
                height: 1.88
            }
        },
        components: {
            'cpn':cpn
        }
    })
</script>
</body>
</html>

12.子级向父级传递

注：发射事件，自定义事件，子传父；然后父组件监听事件，注意名字不要用驼峰标识。

<!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'>
   <cpn v-on:itemclick="cpnClick"></cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn">
    <!-- 如果有多个标签，需要外部有个div包起来 -->
    <div>
        <button v-for='item in categories' @click="btnClick(item)">{{item.name}}</button>
    </div>
</template>
<script src='../js/vue.js'></script>
<script>
    ///1.子组件
     const cpn = {
        template: '#cpn',
        data(){
            return {
                categories:[
                    {id:    'aaa',name: '热门推荐'},
                    {id:    'bbb',name: '手机数码'},
                    {id:    'ccc',name: '家用家电'},
                    {id:    'ddd',name: '电脑办公'},
                ]
            }
        },methods:{
            btnClick(item){
                //console.log(item);
                // 发射事件，自定义事件，子传父
                this.$emit('itemclick',item)
            }
        }
     }
    //2.父组件
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        },
        components: {
            cpn
        },methods:{
            cpnClick(item){
                console.log('cpnClick',item);
            }
        }
    })
</script>
</body>
</html>

13.父子组件通信案例

<!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'>
    <cpn :number1 ='num1' :number2 ='num2' @num1change="num1change"   @num2change="num2change"> </cpn>
</div>
<template id="cpn">
    <div>
        <h2>props:{{number1}}</h2>
        <h2>{{dnumber1}}</h2>
        <!-- <input type="text"  v-model="dnumber1"> -->
        <input type="text" v-bind:value="dnumber1" @input="number1Input">
        <h2>props:{{number1}}</h2>
        <h2>{{dnumber2}}</h2>
        <!-- <input type="text"  v-model="dnumber2"> -->
        <input type="text" v-bind:value="dnumber2" @input="number2Input">
    </div>
</template>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            num1:   1,
            num2:   0
        },
        methods:{
            num1change(value){
                this.num1 = parseFloat(value);
            },
            num2change(value){
                this.num2 = parseFloat(value);
            }
        },
        components: {
            cpn:{
                template: "#cpn",
                props:{
                    number1: Number,
                    number2: Number
                },
                data(){
                    return {
                        dnumber1:this.number1,
                        dnumber2:this.number2
                    }
                },methods:{
                    number1Input(event){
                        //1.将input的value值 赋值到dnumber1
                        this.dnumber1 = event.target.value;
                        //2.为了让父组件可以修改值，发出一个事件
                        this.$emit('num1change',this.dnumber1)
                        //3.同时修改dnumber2 的值
                        this.dnumber2 = this.dnumber1 * 1000;
                        this.$emit('num2change',this.dnumber2)
                    },
                    number2Input(event){
                        this.dnumber2 = event.target.value;
                        this.$emit('num2change',this.dnumber2)
                        //3.同时修改dnumber2 的值
                        this.dnumber1 = this.dnumber2 / 1000;
                        this.$emit('num1change',this.dnumber1)
                    },
                }
            }
        }
    })
</script>
</body>
</html>

分析：

无箭头：双向绑定

14.watch监听

<!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'>
    <cpn :number1 ='num1' :number2 ='num2' @num1change="num1change"   @num2change="num2change"> </cpn>
</div>
<template id="cpn">
    <div>
        <h2>props:{{number1}}</h2>
        <h2>{{dnumber1}}</h2>
        <input type="text"  v-model="dnumber1">
        <!-- <input type="text" v-bind:value="dnumber1" @input="number1Input"> -->
        <h2>props:{{number1}}</h2>
        <h2>{{dnumber2}}</h2>
        <input type="text"  v-model="dnumber2">
        <!-- <input type="text" v-bind:value="dnumber2" @input="number2Input"> -->
    </div>
</template>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            num1:   1,
            num2:   0
        },
        methods:{
            num1change(value){
                this.num1 = parseFloat(value);
            },
            num2change(value){
                this.num2 = parseFloat(value);
            }
        },
        components: {
            cpn:{
                template: "#cpn",
                props:{
                    number1: Number,
                    number2: Number
                },
                data(){
                    return {
                        dnumber1:this.number1,
                        dnumber2:this.number2
                    }
                },watch:{
                    dnumber1(newValue){
                        this.dnumber2 = newValue *100;
                        this. $emit('num1change',newValue);
                    },
                    dnumber2(newValue){
                        this.dnumber1 = newValue / 100;
                        this. $emit('num2change',newValue);
                    }
                }
            }
        }
    })
</script>
</body>
</html>

注：这部分建议看视频

https://www.bilibili.com/video/BV15741177Eh?p=64&spm_id_from=pageDriver

15.父组件访问子组件对象

推荐使用$refs

<!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'>
    <cpn></cpn>
    <cpn></cpn>
    <cpn ref="aaa"></cpn>
    <button @click="btnClick">按钮</button>
</div>
<template id="cpn">
    <div>
        我是子组件
    </div>
</template>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        },components: {
            cpn:{
                template: "#cpn",
                data(){
                    return {
                        name:'我是子组件的name'
                    }
                },
                methods:{
                    showMessage(){
                        console.log('showMessage');
                    }
                }
            }
        },methods:{
            btnClick(){
                //1.$children
                // //console.log(this.$children);
                // for(let i =0;i<this.$children.length;i++){
                //     this.$children[i].showMessage();
                // }
                //2.$refs ==>对象类型，默认是一个空的对象 ref = "aaa"
                console.log(this.$refs.aaa.name);
            }
        }
    })
</script>
</body>
</html>

16.子组件访问父组件对象

<!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'>
    <cpn></cpn>
</div>
<template id="cpn">
    <div>
        <h2>我是cpn组件</h2>
       <ccpn></ccpn>
    </div>
</template>
<template id="ccpn">
    <div>
        <h2>我是子组件</h2>
        <button @click="btnClick">按钮</button>
    </div>
</template>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        },components: {
            cpn:{
                template: "#cpn",
                data(){
                    return {
                        name:'我是子组件的name'
                    }
                },
                components: {
                    ccpn:{
                        template: "#ccpn",
                        methods: {
                            btnClick(){
                                //1.访问父组件
                                console.log(this.$parent.name);
                                //2.访问根组件
                                console.log(this.$root); 
                                console.log(this.$root.message); 
                            }
                        }
                    }
                }           
            }
        }
    })
</script>
</body>
</html>

17.插槽slot

slot翻译为插槽：

在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。
插槽的目的是让我们原来的设备具备更多的扩展性。
比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。

组件的插槽：

组件的插槽也是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。

栗子：移动网站中的导航栏。

移动开发中，几乎每个页面都有导航栏。
导航栏我们必然会封装成一个插件，比如nav-bar组件。
一旦有了这个组件，我们就可以在多个页面中复用了

如何去封装这类的组件呢？

它们也很多区别，但是也有很多共性。
如果，我们每一个单独去封装一个组件，显然不合适：比如每个页面都返回，这部分内容我们就要重复去封装。
但是，如果我们封装成一个，好像也不合理：有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字，等等。

如何封装合适呢？抽取共性，保留不同。

最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
一旦我们预留了插槽，就可以让使用者根据自己

的需求，决定插槽中插入什么内容。
是搜索框，还是文字，还是菜单。由调用者自己来决定。

<!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>
<!--
    1.插槽的基本使用 <slot></slot>
    2.插槽的默认值 <slot>button</slot>
    3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
  -->
<div id='app'>
    <cpn>
        <button>按钮</button>
    </cpn>
    <cpn>
        <span>哈哈哈</span>
    </cpn>
    <cpn>
        <!-- 一个插槽全部替换 -->
        <i>呵呵呵</i>
        <div>我是div元素</div>
        <p>我是p元素</p>
    </cpn>
    <cpn>
        <button>按钮</button>
    </cpn>
</div>
<template id="cpn">
    <div>
        <h2>我是组件</h2>
        <p>我是组件，哈哈哈</p>
        <!-- 当没有传的时候，会默认显示按钮 -->
        <slot><button>按钮</button></slot>
    </div>   
</template>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        },
        components: {
            cpn:{
                template:"#cpn"
            }
        }
    })
</script>
</body>
</html>

18.具名插槽slot

当子组件的功能复杂时，子组件的插槽可能并非是一个。

比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
这个时候，我们就需要给插槽起一个名字

如何使用具名插槽呢？

非常简单，只要给slot元素一个name属性即可
<slot name='myslot'></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>
<!--
    1.插槽的指定替换
  -->
<div id='app'>
    <cpn>
        <span slot="middle">改变中间的，其他不改</span>
    </cpn>
</div>
<template id="cpn">
    <div>
        <slot name="left">左边</slot>
        <slot name="middle">中间</slot>
        <slot name="right">右边</slot>
    </div>   
</template>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        },
        components: {
            cpn:{
                template:"#cpn"
            }
        }
    })
</script>
</body>
</html>

19.编译作用域

我们来考虑下面的代码是否最终是可以渲染出来的：

<cpn v-show="isShow"> </cpn>中，我们使用了isShow属性。
isShow属性包含在组件中，也包含在Vue实例中。

答案：最终可以渲染出来，也就是使用的是Vue实例的属性。
为什么呢？

官方给出了一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
而我们在使用的时候，整个组件的使用过程是相当于在父组件中出现的。
那么他的作用域就是父组件，使用的属性也是属于父组件的属性。
因此，isShow使用的是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'>
    <!-- isShow是 实例的isShow，不是组件的 -->
    <cpn v-show="isShow"></cpn>
</div>
<template id = "cpn">
    <div>
        <h2>我是子组件</h2>
        <p>我是内容，啊哈哈</p>
    </div>
</template>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            isShow: true
        },
        components: {
            cpn:{
                template:"#cpn",
                data(){
                    return {
                        isShow:false
                    }
                }
            }
        }
    })
</script>
</body>
</html>

20.作用域插槽（插槽中将子组件数据传递给父组件）

这里，我们用一句话对其做一个总结，然后我们在后续的案例中来体会：

父组件替换插槽的标签，但是内容由子组件来提供。

我们先提一个需求：

子组件中包括一组数据，

比如：pLanguages: [‘JavaScript’, ‘Python’, ‘Swift’, ‘Go’, ‘C++’]
需要在多个界面进行展示：

某些界面是以水平方向一一展示的，
某些界面是以列表形式展示的，
某些界面直接展示一个数组

内容在子组件，希望父组件告诉

我们如何展示，怎么办呢？

利用slot作用域插槽就可以了

在父组件使用我们的子组件时，从子组件中拿到数据：

我们通过获取到slotProps属性
在通过slotProps.data就可以获取到刚才我们传入的data了

<!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'>
    <cpn></cpn>
    <cpn>
        <!-- 目的是获取子组件的pLanguage -->
        <!-- Vue2.5.x一下，必须是template模板 -->
        <!-- 大于2.5.x，可以是div等等 -->
        <template slot-scope="slot">
            <span v-for ="item in slot.data">{{item}}---</span>
        </template>
    </cpn>
    <cpn>
        <!-- 目的是获取子组件的pLanguage -->
        <!-- Vue2.5.x一下，必须是template模板 -->
        <!-- 大于2.5.x，可以是div等等 -->
        <template slot-scope="slot">
            <span v-for ="item in slot.data">{{item}}*****</span>
        </template>
    </cpn>
    <!-- <cpn></cpn> -->
</div>
<template id = "cpn">
    <div>
        <slot :data="pLanguage">
            <ul>
                <li v-for="item in pLanguage">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        },
        components: {
            cpn:{
                template:"#cpn",
                data(){
                    return {
                        pLanguage:  ['javaScript','c++','c#','python']
                    }
                }
            }
        }
    })
</script>
</body>
</html>

Vue学习笔记_组件化

🚙Vue组件化🚙

1.组件化

2.注册组件

3.注册组件步骤解析

4.全局组件和局部组件

5.父组件和子组件

6.注册组件的语法糖

7.模板的分类写法

8.组件数据

9.父子间通信

10.父级向子级传递

11.props驼峰标识

12.子级向父级传递

13.父子组件通信案例

14.watch监听

15.父组件访问子组件对象

16.子组件访问父组件对象

17.插槽slot

18.具名插槽slot

19.编译作用域

20.作用域插槽（插槽中将子组件数据传递给父组件）

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vue学习笔记_组件化

🚙Vue组件化🚙

1.组件化

2.注册组件

3.注册组件步骤解析

4.全局组件和局部组件

5.父组件和子组件

6.注册组件的语法糖

7.模板的分类写法

8.组件数据

9.父子间通信

10.父级向子级传递

11.props驼峰标识

12.子级向父级传递

13.父子组件通信案例

14.watch监听

15.父组件访问子组件对象

16.子组件访问父组件对象

17.插槽slot

18.具名插槽slot

19.编译作用域

20.作用域插槽（插槽中将子组件数据传递给父组件）

热门文章

最新文章

相关课程

相关电子书