Vue3-组件与动画

组件

什么是组件：？

一个小的功能分区，是可以重复使用的模块

复杂项目拆分简单的组件让团队开发更高效；

定义组件

 const toggle={
        template:`<button @click="change"><span v-if="open">开</span><span v-else>关</span></button>`,
        data(){
            return{
                open:this.value
            }
        }

注册组件

 Vue.createApp({
        //注册组件
        components: { steper },
        data() {
            return {
                w1: 10,
                w2: 10
            }
        }
    }).mount(".app")

注册组件：components:{ }

使用组件

上面我们定义了组件，下面来使用组件

<step></step>

<step></step>

组件的参数传递

props父传子

<steper:value="5">

steper内部
props:{value:{tepe:Number,default:1}}

steper内部使用（只读，不能修改）
this.value

emit子传父

在steper内部
this.$emit("numchange",this.num)
numchange事件名称，this.num事件值

父组件
<steper @numchange="w1=@event">
@event就是子组件通过numchange传递过来的值this.num

补充：父传子 props，子传父$emit, slot插槽  作用域 v-slot:default=”$scope”

插槽

向一个组件传递内容，这个时候就需要用<slot>来传递

<step>
嵌套内容
</step>

通过
<slot></slot>
获取组件的嵌套内容

插槽的命名 

<step>
<template  v-slot:pre>
  pre插槽内容
</template>
</step>

<slot name="pre">

动画

vue动画是通过组件，transition实现

秘诀:自动对显示与隐藏的元素添加类名

look实例：实现单击按钮，图片自动显示与隐藏

html部分:

 <div class="app">
        <button @click="flag=!flag">玛卡巴卡</button>
        <transition name="fade">
            <img src="./img/mkbk.jpg" v-if="flag">
        </transition>
    </div>

js部分：

 Vue.createApp({
        data() {
            return {
                flag: true
            }
        }
    }).mount(".app")

加上这次的重点：动画

 /* 整个进入过程和离开过程 */
        .fade-enter-active,
        .fade-leave-active {
            transition: all ease-in-out 1s;
        }

        /* 进入状态 */
        .fade-enter-from {
            opacity: 0;
        }

        /* 进入到状态 */
        .fade-enter-to {
            opacity: 1;
        }

        /* 离开开始状态 */
        .fade-leave-from {
            opacity: 1;
        }

        /* 离开结束状态 */
        .fade-leave-to {
            opacity: 0;
        }

v-enter-from 进入开始 v-enter-to 进入结束

v-leave-from 离开开始  v-leave-to 离开结束

v-enter-active进入整个状态

v-leave-active离开整个状态

 动画组件：

<transition>

 <transition name="fade" mode="in-out" enter-active-class="slideInRight animated" leave-active-class="slideOutLeft animated">
            <img src="./img/mkbk.jpg" key="a" v-if="flag">
            <img src="./img/vsimg.png" key="b">
        </transition></p>

mode模式：in-out  和   out -in

enter-active-class  自定义进入class名称

leave-active-class   自定义离开class名称

<transition-group>

又叫列表过渡

<transition-group tag="div" name="slide"  >      <div class="item" v-for="item in undoList" :key="item.name"> ..... </transition-group>

.slide-move{     transition: all ease 1s; }

tag包裹标签名

.slide-move 表示正在移动的元素

节点引用 ref

ref 为子组件或HTML元素指定引用id

使用实例：

 <div class="app">
        <btn ref="btn"></btn>
        <input type="text" ref="inp">
        <button @click="say">按钮</button>
    </div>

 const btn={
        template:
        `
        <button @click="n++">{{n}}</button>
        `,
        data(){
            return{n:5}
        },
        methods: {
            add(){
                this.n+=5
            }
        },
    }
    Vue.createApp({
        components:{btn},
        data() {
            return {
                flag: true
            }
        },
        methods:{
            say(){
                this.$refs.btn.add();
                var str=this.$refs.btn.n;
                alert(str);
            }
        }
    }).mount(".app")

this.$refs.btn.add( )访问组件的方法
this.$refs.btn.num   访问组建的属性