Vue基础配置、组件通信、自定义指令

基础配置

Vue框架已经集成了webpack配置

小注意点

vbase 快速生成vue模板
组件名必须是多词格式(驼峰模式)
具体三种写法:
①小驼峰:abcDef.vue
②大驼峰：AbcDef.vue
③中横线：abc-def.vue
假如文件名不符合多次格式的补救办法：
导出重命名使用多词格式
在这里插入图片描述

容器

index.html中的<div id="app"></div>

在这里插入图片描述

入口文件

main.js为入口文件，里面创建了vue实例对象
render为渲染函数 render:h=>h(App),这里的App指的是同级的App.vue文件。
在这里插入图片描述

Vue文件结构

在这里插入图片描述

组件的导入导出

根组件(App.vue)(页面只能展示一个组件，即根组件，其他组件想展示只能导入根组件中)

在这里插入图片描述
style默认支持css样式

普通组件的注册使用(组件的导入导出)

组件注册的两种方式

1.局部注册：只能在注册的组件内使用

在这里插入图片描述

2.全局注册：所有组件内都能使用

在这里插入图片描述

scoped解决样式冲突

scoped使得样式只会作用于当前组件
在这里插入图片描述

data必须是函数

data是函数，保证每个组件实例可以维护独立的一份数据对象
每次创建新的组件实例都会新执行一次data函数，得到一个新对象

组件通信

组件之间的关系只有两类：父子关系和非父子关系
组件通信(主要是父子组件之间的数据传递)

父子组件之间的数据通信

父传子

父组件使用自定义属性向子组件传递数据

<template>
  <div>
    <!-- 父传子的语法：父通过自定义属性的方式，向子组件传递数据 -->
<!-- <XtShortCut :id="goodList[0].id" :name="goodList[0].name"></XtShortCut> -->
<XtShortCut :item="goodList[0]"></XtShortCut>
<XtShortCut :item="goodList[1]"></XtShortCut>
<XtShortCut :item="goodList[2]"></XtShortCut>
  </div>
</template>
<script>
import XtShortCut from './components/XtShortCut.vue'
export default {
  data() {
    return {
      goodList: [
          {id:1,name:'方便面',price:2.5,info:'好吃不贵'},
          {id:2,name:'火腿',price:1.5,info:'好吃不贵'},
          {id:1,name:'工作餐',price:25,info:'好吃不贵'},
        ]
      }
    },
  components: {
      XtShortCut  }}
</script>
<style lang="scss" scoped>
</style>

子组件使用props接收传递过来的数据

props:[‘属性名’]

<template>
    <div class="goods">
        <h2>商品名称 {{ item.name }}</h2>
        <p>商品单价：{{ item.price }}</p>
        <p>商品描述：{{ item.info }}</p> </div>
</template>
<script>
    export default {
        props:['item']     // 名字必须和自定义属于的名字相同
    }
</script>
<style lang="scss" scoped>
.goods{
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    border-radius: 5px;
}
</style>

在这里插入图片描述

prop&data、单项数据流、props校验

子组件不能直接修改父组件的数据
在这里插入图片描述
props写成数组格式

props写成对象格式（可以对接收的变量进行校验）

// props写成数组格式
  // props:['str','list','say']

  // 写成对象格式可以对接收的数据进行校验
  //1.required:true----------------表示父组件，必须传递这个值
  // 2.type:String|Number|Object|Array|Boolean|Funcation
  // 2.1 type:[strin,Number]
  // 3.default:''
  // 3.1默认值是对象或数组，要写成函数格式，函数中返回对象或数组

  props: {
    str: {
      // 在这里对接收的数据进行校验
      required: true,//表示父组件必须传递这个数据
      
    },
    age: {
      default:100, //如果父组件没有传age，则让age等于100
    },
    user: {
      default: () => {
        return {}  //对于默认值是数组或对象的形式，要写成函数形式
      }
    },
    say:{}
  }

子传父(通过事件)($emit)

事件名要一致

核心语法：$emit(‘事件名’，传的数据) （$emit用来触发事件）
子组件写法举例：
< button @click="$emit(‘事件名’，传的数据,..,...)"></button>
父组件写法：
<MyTest @事件名=“方法”></MyTest>
methods:{
方法(val){
//形参val接受到的就是子组件传递过来的数据
}

sync修饰符（更常用）

使用sync修饰符，父传子没什么变化，子传父，父不在需要另写事件接收
举例为控制子组件弹出框的显示隐藏，
在这里插入图片描述

依赖注入

父组件向子组件(后代)传递数据的一种方式
传递的对象是响应式的数据，传入的其他格式数据是非响应式的

在这里插入图片描述

ref和refs

寻找标签和组件对象（取代document.querySelector，在vue中将在整个文件中查找，而不是在单个组件中查找，不建议在vue中使用，ref只会找当前组件的匹配对象）(获取组件可以调用对应组件的对象和方法)
this.$refs包括当前组件的索引ref对象

1.如果组件中多个元素有相同的ref值，则this.$refs.xxx只找最后一个
2.循环出来之后，多个元素有相同的ref值，this.$refs.xxx找到全部

调用对应组件中的方法（什么时候加this同data一样）

在这里插入图片描述

自定义指令(为了复用)

全局指令

全局指令在main.js入口文件中实现
使用方法：v-指令名称
每个钩子函数都有两个参数（ele,obj）
ele:绑定指令的元素
obj:指令的一些信息（比如绑定指令的值，binding.value）

Vue.directive('指令名称',{
//指令周期的钩子函数，每个钩子函数都有两个参数
bind(ele,obj){}, //不重要，只执行一次，DOM渲染之前执行里面可以进行样式操作
inserted(ele,obj){},  //重要 ，只执行一次，DOM渲染之后执行，里面可以进行行为操作
update(ele,obj){}, //重要，数据更新之后执行
componentUpdated(ele,obj){}, //不重要，父子组件都更新后执行
unbind(ele,obj){},  //不重要，指令解绑的时候执行
})

局部指令

在export default{}中实现，只能在当前指令中使用,

export default{
directives:{指令名称:{
//指令周期的钩子函数，每个钩子函数都有两个参数
bind(ele,obj){}, //不重要，只执行一次，DOM渲染之前执行里面可以进行样式操作
inserted(ele,obj){},  //重要 ，只执行一次，DOM渲染之后执行，里面可以进行行为操作
update(ele,obj){}, //重要，数据更新之后执行
componentUpdated(ele,obj){}, //不重要，父子组件都更新后执行
unbind(ele,obj){},  //不重要，指令解绑的时候执行
},  }
}