Vue基础知识(五)

1 丶组件的嵌套

在单页面应用中,组件都会被拆分到独立的vue文件中,组件的嵌套其实就是组件的引入与使用

父组件中在使用时需要引入子组件

import children from "子组件所在路径"

组件嵌套的特点:

子组件内容可以直接在父组件中通过标签展示 , 且不会影响父组件本身内容的显示 , 在多个子组件进行视图切换时 , 父组件中的视图数据会进行保留

2 丶父子组件的传值

父子组件的传值可以通过在子组件标签上通过自定义属性的来进行传递 , 子组件通过props选项进行接收

父组件传递数据 : 变量sendData

<my-children :sendData="sendData"></my-children>

子组件接收数据

export default {
  props: ["sendData"],
};

子组件接收的数据使用方法与在data函数定义的数据使用方式相同

props选项除了接收数值外,还可以进行给自定义数据添加约束和默认值

props: {
    // 判断类型
    sendData: String,
    // 默认值
    default: function () {
      return "默认值";
    },
    // 数据校验
    ValidityState: function (value) {
      return value.length > 0;
    },
  }

3 丶子父组件的传值

子父组件的数据传值通过自定义事件进行完成

子组件通过事件触发向父组件传递数据 

语法 : this.$emit("自定义事件名称","需要发送的数据")

methods: {
    send() {
      this.$emit("自定义事件名称", this.clidrendata);
    },
  }

父组件监听自定义事件

<my-children @自定义事件名称="事件处理函数event"></my-children>

methods: {
    event(value) {
      console.log(value);
    },
  }

4 丶组件之间的传值

在页面视图中,任意两个组件都会有直接或间接的联系,但是当组件的嵌套层数过多时,通过子父组件或者父子组件传值会十分麻烦 , 在这样的情况下我们可以借助事件中心来完成这一步操作

操作步骤 : 

① : 需要先创建一个事件中心(js文件)并在里面声明一个空白Vue实例,主要用来传递数据

// 引入vue模块
import Vue from "vue"
// 创建空白vue实例
const vm = new Vue()
// 导出数据
export default vm

② : 分别在两个组件中导入事件中心 , 其中一个组件发送数据 , 另一个接收数据

组件一发送数据 : 

data() {
    return {
      clidrendata: "数据",
    };
  },
  methods: {
    send() {
      vm.$emit("event", this.clidrendata);
    },
  },

组件二接收数据 : 

created() {
    this.send();
  },
  methods: {
    send() {
      vm.$on("event", val => {
        console.log(val);
      });
    },
  },

5 丶插槽

插槽相当于子组件中的提供给父组件使用的一个占位符，用标签<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签

插槽分为具名插槽和匿名插槽 、作用域插槽

匿名插槽 : <slot></slot>

    <!-- 在父组件中子组件标签的中写入的数据会直接显示在子组件slot标签中 -->
    <my-home>
      <p>向插槽注入数据</p>
    </my-home>

子组件 : 

<slot></slot>

具名插槽 : <slot name:"插槽名称"></slot>

当组件需要使用多处插槽时,可以使用具名插槽进行准确的插入

具名插槽在使用时需要template标签进行包裹

    <my-home>
      <template v-slot:title>
        <p>向插槽注入数据:标题</p>
      </template>
      <template v-slot:footer>
        <p>向插槽注入数据:页脚</p>
      </template>
    </my-home>

    <slot name="title"></slot>
    <slot name="footer"></slot>

作用域插槽 : 作用域插槽是使用最多的插槽 , 在使用时子组件可以通过插槽向父组件传递数据

<slot :row="goods" :other="num"></slot>

    <template v-slot="props">
        <p>{{ props }}</p> // { "row": [ "a", "b", "c" ], "other": 666 }
      </template>

在作用域插槽中还可以通过事件来接收数据

      <template v-slot="props">
        <button @click="event(props)">点击</button>
        <p>{{ props }}</p>
      </template>