vue系列---组件通信refisslot插槽mixin混入脚手架使用animate

Posted 2021-05-19 程序媛...

1.组件通信***

1.1父传子:父组件的数据给了子组件

理论：

1.父组件通过自定义属性传值

 <v-child :msg="name"></v-child>

2.子组件通过props接收

export default {
    props:["msg"]
}

props验证

props: {
    tel: {
      //数据类型约束
      type: String,
      // 必填项
      required: true,
    },
    msg: {
      type: String,
      // 默认值
      default() {
        return "王昭君";
      },
    },
  },

1.2子传父：子组件要修改父组件的值

父组件绑定自定义事件

<v-child @asd="isshow=false" @cname="change($event)"></v-child>

子组件通过$emit()触发自定义事件：

changeName(name){
  //通知父组件改名字
  // $emit(‘自定义事件名称’,\'参数\') 参数会被传到自定义事件的event,父组件接收。
  this.$emit("cname",name)
}

注意：

1.父传子，父组件传递数据给子组件，默认是父变，子变；子变，父不变，还报错；
2.间接修改：子组件想要修改父组件的值，使用子传父 ；
3.3.直接修改：父变，子变，子变，父变，还不报错 ,传递json

1.3 非父子

1.EventBus 了解

1.main.js中

// 1.vue原型上加一个EventBus,值是vue对象
// 所有组件都可以使用该变量，而且他还具备$on() $emit()
Vue.prototype.EventBus=new Vue();

2.触发自定事件

send(){
  //触发了sendA事件
  this.EventBus.$emit("sendA",this.aData)
}

3.绑定事件

mounted(){
  //绑定事件
  this.EventBus.$on("sendA",(e)=>{
    this.a=e
  })
},

2.ref

1.获取DOM节点

注意：因为节点最早在mounted的时候创建完成，所以使用ref一定要在mounted之后

 <div class="red" ref="red"></div>

toBlue() {
      let div = this.$refs.red;
      div.style.background = "blue";
    },

2.父组件获取子组件实例，从而取到子组件的数据和方法

 <v-child ref="child"></v-child>

click(){
  //调用子组件的属性
  console.log(this.$refs.child.name);
  //调用子组件的方法
  this.$refs.child.changeName("鲁班")
}

3.scoped

样式局部作用：只在当前文件中起作用

<style scoped>
h3{
    color:blue;
}
</style>

4.is

1.is可以解决标签固定搭配问题

<ul>
  <li is="v-one"></li>
</ul>

2.动态组件

<button @click="name=\'v-one\'">one</button>
<button @click="name=\'v-two\'">two</button>
<!-- 2. :is 动态组件 -->
<div :is="name"></div>

5.脚手架上使用动画

1.下载

npm i animate.css --save

2.main.js引入

import "animate.css"

3.使用

<transition
            enter-active-class="animate__animated animate__bounceInLeft"
            >
  <div :is="name"></div>
</transition>

6.slot插槽

1.匿名插槽

 <!-- 1.匿名插槽：所有嵌套的内容都会放到匿名插槽中 -->
      <slot></slot>

2.具名插槽

 <!-- two.vue  -->
<div class="box">
      <!-- 2.具名插槽  -->
      <slot name="shang"></slot>
      <h3>this is two</h3>
      <slot name="xia"></slot>
  </div>

<v-two>
  <ul slot="shang">
    <li>嘻嘻嘻</li>
    <li>哈哈哈</li>
  </ul>
  <ol slot="shang">
    <li>手机</li>
    <li>电脑</li>
  </ol>
</v-two>

3.作用域插槽

如果父组件使用子组件，子组件结构有一部分不确定，而且不确定的这部分还需要数据，那么就需要使用作用于插槽。

子组件：

<template>
  <div class="box">
    <h3>作用域插槽--开始了</h3>
    <!-- 1.使用slot,传递数据 -->
    <slot :d="arr" ></slot>
    <h3>结束了</h3>
  </div>
</template>

父组件：

<!-- 3.作用域插槽 -->
<v-three :arr="arr1">
  <!-- 2.传递给slot的内容是template,template通过v-slot|slot-scope可以接受slot传递的数据 -->
  <template v-slot="props">
    <ul>
      <li v-for="item in props.d" :key="item.id">{{item.name}}</li>
    </ul>
  </template>
</v-three>

<v-three :arr="arr2">
  <template slot-scope="props">
    <ol>
      <li v-for="item in props.d" :key="item.id">{{item.name}}</li>
    </ol>
  </template>
</v-three>

7.混入

1.将多个组件的数据、方法、生命周期等提取到一个文件中

export default {
    data() {
        return {
            isshow: false,
        };
    },
    methods: {
        show() {
            this.isshow = true;
        },
        hide() {
            this.isshow = false;
        },
    },
    mounted(){
        console.log("toggle");
    }
}

2.组件使用

<script>
import toggle from "./toggle"
export default {
  mixins:[toggle]
};
</script>