组件

全局组件和局部组件

全局

// main.js
// 在入口文件导入全局组件的文件夹
import Qj from './components/qj.vue'
// 把 Qj 文件注册为全局组件 
Vue.component('QJ', Qj);
// 注意，要在 new Vue() 之前注册

局部

// 哪个组件要用到该局部组件就组件导入
import Jb from "./components/jb.vue";
export default {
  // 把组件注册为这个组件的局部组件
  components: {
    Jb,
  },
};

父子组件间传值

父向子传值

// 1. 子组件对象通过props属性来接收父组件的传值
export default {
  name: "Zi",
  props: ["text"],
};
// 2. 在使用子组件的时候把父组件里面的值通过属性绑定来传递
 <zi :text="mgs" />
// 3. 该值可以在子组件内正常使用
<template>
  <div id="zi">
    <h3>子组件</h3>
    <div>{{ text }}</div>
  </div>
</template>

props的具体规则

props:{
  item1:{
    // 类型
    type:[String,Array],
    // 必填
    required:trun,
    // 默认值,如果默认值为数组或者对象时,必须为工厂函数返回的形式
    default:"默认值",
    //验证函数,return值为false时Vue.js会报错,如果值未传递,则会跳过
    validator:function(value){
      return value.indexOf(1)
    }

  }
}

非props属性

// 1.当父组件给子组件设置了属性,但此属性在props中不存在,这是会自动绑定到子组件的根元素上 
// 2.如果组件跟元素已经存在对应属性,则会替换组件内部的值,class和style例外,他们会合并
// 3.在子组件导出对象内设置inheritAttrs:fakse,则不会受父组件赋值的影响,class和style是例外

子向父传值:: 通过自定义事件实现

// 子组件 
<button @click="c">子组件按钮</button>
{
 data() {
    return {
      list: [1, 2, 3, 4],
    }
  },
  methods: {
    c() {
      // 参1:自定义事件名称, 参2：父组件事件接收的实参
      this.$emit("on-change", this.list);
    }
  },
}
// 父组件
 <zi @on-change="onf" />
{
    data() {
    return {
      fList: [],
    };
  },
  components: {
    Zi,
  },
  methods: {
    // data为this.$emit的第二个参数
    onf(data) {
      this.fList = data;
    },
  },
} 
// 或者
//$event为this.$emit的第二个参数
 <zi @on-change="fList.push(...$event)" />

关系型组件间传值

可以通过父组件进行数据中转
$root当前组件树根实例
$parent父实例
$children直接子组件
$refs用于获取设置了ref属性的html标签或者子组件

非关系型组件传值

Eventbus事件总线,是一个独立的事件中心,用于管理不同的组件的传值操作.通过一个新的Vue实例来管理组件传值操作

// 发送数据的组件触发bus事件,接收数据的组件给bus注册对应的事件
// bus.$emit("事件名",数据)
// bus.$on("事件名",(此次参数为上面数据)=>{})

observable跨组件状态存储器

1. 创建并且导出存储的数据的对象
export default new Vue.observable({
    text: "我是数据"
})
2. 哪里需要哪里用
<template>
  <div class="comA">
    // 使用
    {{ a.text }}
  </div>
</template>

<script>
// 导入
import neutral from "../store/store.js";
export default {
  data() {
    return {
      // 赋值
      a: neutral,
    };
  },
};
</script>

VueX

组件插槽

单个插槽

<template>
  <div id="ACom">
    <h1>子组件A</h1>
    // 插槽
    <slot></slot>
  </div>
</template>
//
<a-com>这里的内容会渲染到插槽里面</a-com>
// 注意点
<a-com>这里是父组件的视图模块，只能使用父组件的数据{{}}</a-com>
// 可以在<slot>中为插槽设置默认值

具名插槽

<template>
  <div id="ACom">
    <slot name="header"></slot>
    <slot>默认name为default</slot>
    <slot name="footer"></slot>
  </div>
</template>
//
 <a-com>
      <template v-slot:header>
        <h1>组件头部</h1>
      </template>
      <template v-slot:default>
        <p>没有名字的插槽内容1</p>
        <p>没有名字的插槽内容2</p>
      </template>
      <template v-slot:footer>
        <h1>组件头部</h1>
      </template>
 </a-com>

作用域插槽

<template>
  <div id="ACom">
    <slot name="header" :atext="a" :btext="b"></slot>
    <slot name="footer" :btext="b"></slot>
  </div>
</template>

export default {
  data() {
    return {
      a: "内容a",
      b: "内容b",
    };
  },
};

//
 <a-com>
      <template v-slot:header="{ atext, btext }">
        <h1>{{ atext }}</h1>
        <h1>{{ btext }}</h1>
      </template>

      <template v-slot:footer="dataobj">
        <h1>{{ dataobj.btext }}</h1>
      </template>
  </a-com>

3. vue组件

组件

全局组件和局部组件

父子组件间传值

关系型组件间传值

非关系型组件传值

组件插槽