Vue学习笔记(3)

阅读数: 次 2022-09-20

文章导航

Vue学习笔记

Vue组件化，组件数据存放，父子组件通信…

Vue组件化

组件化思想

组件化是Vue.js中的重要思想，它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用，任何的应用都会被抽象成一颗组件树。

注册组件

组件的使用分成三个步骤：
创建组件构造器 -> 注册组件 -> 使用组件

<div id="app">
  <!--3.使用组件-->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>

  <div>
    <div>
      <my-cpn></my-cpn>
    </div>
  </div>
</div>

<my-cpn></my-cpn>

<script src="../js/vue.js"></script>
<script>
  // 1.创建组件构造器对象
  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: '你好啊'
    }
  })
</script>

注册组件步骤解析

1、Vue.extend()：

调用Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时，传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方，要显示的HTML代码。

2、Vue.component()：

调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传递两个参数：1、注册组件的标签名 2、组件构造器

3、组件必须挂载在某个Vue实例下，否则它不会生效。

全局组件和局部组件

调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。

如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件。

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

<div id="app2">
  <cpn></cpn>
</div>

<script src="../js/vue.js"></script>
<script>
  // 1.创建组件构造器
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容,哈哈哈哈啊</p>
      </div>
    `
  })

  // 2.注册组件(全局组件, 意味着可以在多个Vue的实例下面使用)
  // Vue.component('cpn', cpnC)

  // 疑问: 怎么注册的组件才是局部组件了?

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      // cpn使用组件时的标签名
      cpn: cpnC
    }
  })

  const app2 = new Vue({
    el: '#app2'
  })
</script>

父组件和子组件

组件和组件之间存在层级关系。

<div id="app">
  <cpn2></cpn2>
  <!--<cpn1></cpn1>-->
</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: '你好啊'
    },
    components: {
      cpn2: cpnC2
    }
  })
</script>

注册组件的简便写法

我们可以省去了调用Vue.extend()的步骤，直接使用一个对象来代替。

<div id="app">
  <cpn1></cpn1>
  <cpn2></cpn2>
</div>

<script src="../js/vue.js"></script>
<script>
  // 1.全局组件注册的语法糖
  // 1.创建组件构造器
  // const cpn1 = Vue.extend()

  // 2.注册组件
  Vue.component('cpn1', {
    template: `
      <div>
        <h2>我是标题1</h2>
        <p>我是内容, 哈哈哈哈</p>
      </div>
    `
  })

  // 2.注册局部组件的语法糖
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      'cpn2': {
        template: `
          <div>
            <h2>我是标题2</h2>
            <p>我是内容, 呵呵呵</p>
          </div>
    `
      }
    }
  })
</script>

模板分离

我们可以将其中的HTML分离出来写，然后挂载到对应的组件上，必然结构会变得非常清晰。

Vue提供了两种n定义HTML模块内容的方法：
使用<script>标签；
使用<template>标签；

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

<!--1.script标签, 注意:类型必须是text/x-template-->
<!--<script type="text/x-template" id="cpn">-->
<!--<div>-->
  <!--<h2>我是标题</h2>-->
  <!--<p>我是内容,哈哈哈</p>-->
<!--</div>-->
<!--</script>-->

<!--2.template标签-->
<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: '你好啊'
    }
  })
</script>

组件数据存放

存放数据

组件对象也有一个data属性，只是这个data属性必须是一个函数，而且这个函数返回一个对象，对象内部保存着数据。

<!--组件实例对象-->
<div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
</div>

<template id="cpn">
<div>
    <h2>当前计数: {{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    </div>
</template>
<script src="./js/vue.js"></script>
<script>
    // 1.注册组件
    Vue.component('cpn',{
        template: '#cpn',
        data() {
            return {
                counter: 0
            }
        },
        methods: {
            increment() {
                this.counter++
            },
            decrement() {
                this.counter--
            }
        }
    })

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        }
    })
</script>

组件可以访问Vue实例数据吗

不能访问，而且即使可以访问，如果将所有的数据都放在Vue实例中，Vue实例就会变的非常臃肿。
结论：Vue组件应该有自己保存数据的地方。

data在组件中为什么必须是函数

原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。

父子组件通信

父级向子级传递

nprops的值有两种方式：
方式一：字符串数组，数组中的字符串就是传递时的名称。
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

<div id="app">
    <cpn :cmessage='message' :cmovies='movies'></cpn>
</div>

<template id="cpn">
<div>
    <p>{{cmessage}}</p>
    <ul>
        <li v-for="item in cmovies">{{item}}</li>
    </ul>
    </div>
</template>
<script src="./js/vue.js"></script>
<script>

    //父传子：props
    const cpn = {
        template: '#cpn',
        // 数组形式
        // props: ['cmessage','cmovies'],
        //对象形式
        props: {
            // cmessage: String,
            // cmovies: Array,

            cmessage: {
                type: String,					//限制类型
                default: '默认值',			//设置默认值
                required: true,				//必传的值
            },
            cmovies: {
                type: Array,
                default(){
                    return []
                }
            }
        },
    }
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            movies: ['三果盐业','水户钻','红搂梦','西游姬']
        },
        components: {
            cpn
        }
    })
</script>

当需要对props进行等验证时，支持的类型:
String，Number，Boolean，Array，Object，Date，Function，Symbol

使用驼峰命名

使用驼峰的话在动态绑定(v-bind)时需要把大写变为小写，并在前面加-符号；

<div id="app">
    <cpn :c-info="info"></cpn>
</div>

<template id="cpn">
<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: {
            info: {
                name: '张三',
                sex: '男',
                age: 14
            }
        },
        components: {
            cpn
        }
    })
</script>

子级向父级传递

子组件需要向父组件传递数据时，就要用到自定义事件了；
v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件；

自定义事件的流程：
在子组件中，通过$emit()来触发事件。
在父组件中，通过v-on来监听子组件事件。

<!-- 父组件模板 -->
<div id="app">
    <cpn @itemClick="cpnClick">{{	}}</cpn><!-- 父监听子传的事件 -->
</div>

<!-- 子组件模板 -->
<template id="cpn">
<div>
    <button v-for="item in categories" 
            @click="btnclick(item)">
        {{item.name}}
    </button>
    </div>
</template>
<script src="./js/vue.js"></script>
<script>

    // 子组件
    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);//子向父发射一个事件
            }
        }
    }
    // 父组件
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
        },
        components: {
            cpn
        },
        methods: {
            cpnClick(item) {
                // 父处理事件
                console.log("cpnClick",item);
            }
        }
    })
</script>

父子组件的访问方式

<div id="app">
    <!-- 引用组件 -->
    <cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change"></cpn>
</div>
<template id="cpn">
<div>
    <h3>props:{{number1}}</h3>
    <h3>data:{{dnumber1}}</h3>
    <input type="text" v-model="dnumber1" />
    <h2>100倍之后：</h2>
    <h3>props:{{number2}}</h3>
    <h3>data:{{dnumber2}}</h3>
    <input type="text" v-model="dnumber2" />				
    </div>
</template>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            num1: 0,
            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){
                        // 1.修改属性值
                        this.dnumber2 = newValue*100;
                        // 2.为了让父组件可以修改值, 发出一个事件
                        this.$emit('num1change',newValue);
                    },
                    dnumber2(newValue){
                        this.dnumber1 = newValue/100;
                        this.$emit('num2change',newValue);
                    }
                }
            }
        }
    })
</script>

父组件访问子组件

使用$children或$refs reference(引用)；
通过$children访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值。(不常用,需要获取全部组件时使用)；
$refs和ref指令通常是一起使用的；

<div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn ref="aaa"></cpn>
    <button @click="butClick">按钮</button>
</div>
<template id="cpn">
<div>我是子组件</div>
</template>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊！',
        },
        methods: {
            butClick(){
                // 1. $children:父访问子,是一个数组,它包含所有子组件对象。
                // console.log(this.$children);
                // for(let c of this.$children){
                // 	console.log(c.name);
                // 	c.showMessage();
                // }
                // console.log(this.$children[2].name);

                // 2. $refs 对象类型,默认是一个空的对象
                console.log(this.$refs.aaa.name);				
            }
        },
        components: {
            cpn: {
                template: "#cpn",
                data() {
                    return{
                        name: "我是子组件的name",
                    }
                },
                methods: {
                    showMessage(){
                        console.log('showMessage');
                    }
                }
            }
        }
    })
</script>

子组件访问父组件

子组件访问父组件：使用$parent；
子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了；
如果我们将子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题；

<div id="app">
    <cpn></cpn>
</div>
<template id="cpn">
<div>
    <h2>我是cpn组件</h2>
    <ccpn></ccpn>
    </div>
</template>
<template id="ccpn">
<div>
    <h2>我是ccpn组件</h2>
    <button @click="butClick">按钮</button>
    </div>
</template>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
        },
        components: {
            cpn: {
                template: '#cpn',
                data(){
                    return{
                        name: '我是cpn的name属性',
                    }
                },
                components: {
                    ccpn: {
                        template: '#ccpn',
                        methods: {
                            butClick(){
                                // 1. 访问父组件$parent
                                // console.log(this.$parent);
                                // console.log(this.$parent.name);
                                // 2. 访问根组件$root
                                // console.log(this.$root);
                                console.log(this.$root.message);
                            }
                        }
                    }
                }
            }
        }
    })
</script>

slot-插槽

组件的插槽是为了让我们封装的组件更加具有扩展性；

如何封装这类组件呢？
抽取共性，保留不同；最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。

slot基本使用

<slot>中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容。

具名插槽

当子组件的功能复杂时，子组件的插槽可能并非是一个，我们就需要给插槽起一个名字；

<div id="app">
    <cpn><span slot="left"> => </span></cpn>
    <cpn>
        <button slot="center">百度一下</button>
    </cpn>
</div>
<template id="cpn">
<div>
    <slot name="left"><span>左侧</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右侧</span></slot>
    </div>
</template>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
        },
        components: {
            cpn: {
                template: "#cpn",
            }
        }
    })
</script>

作用域插槽

作用域：
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

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

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

    <cpn>
        <!--目的是获取子组件中的pLanguages-->
        <template slot-scope="slot">
<!--<span v-for="item in slot.data"> - {{item}}</span>-->
<span>{{slot.data.join(' - ')}}</span>
        </template>
    </cpn>

    <cpn>
        <!--目的是获取子组件中的pLanguages-->
        <template slot-scope="slot">
<!--<span v-for="item in slot.data">{{item}} * </span>-->
<span>{{slot.data.join(' * ')}}</span>
        </template>
    </cpn>
    <!--<cpn></cpn>-->
</div>

<template id="cpn">
<div>
    <slot :data="pLanguages">
        <ul>
            <li v-for="item in pLanguages">{{item}}</li>
    </ul>
    </slot>
    </div>
</template>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
                    }
                }
            }
        }
    })
</script>

本文作者： 腾飞
本文链接： https://www.tengfei.eu.org/article/8da3525b.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！