Jude's Vuepress

一、jsx如何映射DOM

# 一、jsx如何映射DOM

export function createElement(type,config,children)
// type:用于标识节点的类型
// config:以对象形式传入,组件所有的属性都会以键值对的形式存储在config对象中
// children:以对象的形式传入,它记录的是组件标签之间嵌套的内容

React.createElement("ul",{
  // 传入属性键值对
  className:"list",
  // 从第三个入参开始往后，传入的参数都是children
},React.createElement("li",{
  key:"1",
},"1"),React.createElement("li",{
  key:"2"
},"2"))

// 等效于
<ul className="list">
	<li key="1">1	</li>
	<li key="1">1 </li>
</ul>

# 二、子组件 v-model 高阶用发

v2 写法 默认方式 在父级定义 v-model 值

// # far
<child v-model='msg'>
export default {
 data(){
      return{msg:''}
 }
}

child 默认接收父级 v-model 的值在 props 中的 value (默认值 v3 是 modelValue) 绑定 通过默认 input 触发

// # child
<input :value='value' @input="$emit('input',$event.target.value)">
 props:['value']

如果你不想用 input 元素触发,child 通过设置 model 参数指定触发方式

# child
<input :value='value' @input="ipt">
    model: {
    prop: 'value',
        event: 'update:value'//名字随意 这个是约定格式
},
props:['value']
methods:{
    ipt(){
        this.$emit('update:value',$event.target.value)
    }
}

如果你不想用 value 作为默认值 (绑定多个 v-model),通过设置 model 参数指定触发方式

# child
<input :value='msg' @input="ipt">
 model: {
	prop: 'msg',
	event: 'update:msg'//名字随意 这个是约定格式
},
 props:['msg']

 methods:{
 ipt(){
   this.$emit('update:msg',$event.target.value)
  }
 }

# 三、函数式组件

没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法。实际上，它只是一个接受一些 prop 的函数。在这样的场景下， 我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。一个函数式组件就像这样：

Vue.component('my-component', {
  functional: true,
  // Props 是可选的
  props: {
    // ...
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    // ...
  },
})
//--------------------------
thear: [
  {
    title: '是否超时',
    align: 'center',
    render: (h, params) => {
      return h(
        'div',
        { style: { color: status ? 'red' : '#000' } },
        params.row.status ? '已超时' : '未超时',
      )
    },
  },
]
export default {
  name: 'Column',
  components: {
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: [Function, String],
        index: Number,
        column: {
          type: Object,
          default: null,
        },
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index,
        }
        if (ctx.props.column) {
          params.column = ctx.props.column
        }
        if (typeof ctx.props.render == 'string') {
          try {
            return util.toFunction(ctx.props.render)(h, params)
          } catch (error) {
            throw error
          }
        }
        return ctx.props.render(h, params)
      },
    },
  },
}

# 四、Vuex

import Vue from 'vue'
import Vuex from 'vuex'
import project from './modules/project'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    project,
  },
})

export default store


export default {
  namespaced: true,
  state: {
    id: 0,
  },
  getters: {
    year: (state) => state.tabsData[state.id].year,
  },
  mutations: {
    SET_id: (state, val) => {
      state.id = val
    },
  },
  actions : {
    async getDetail({ commit }, data) {
      //发起有ids 审核有businessId
      let results= await ajax();

        commit('SET_id', results);

    }
  };
}


import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations, mapActions, mapGetters } = createNamespacedHelpers('dialog')

export default {
  computed: {
    ...mapGetters(['watchTime']),

    ...mapState(['showDialog1']),
  },
  mounted() {
    this.$store.dispatch('income/getDetail', this.$route)
    let id = this.$store.state.income.id
  },
  methods: {
    ...mapMutations(['OPEN_dialog1', 'CLOSE_dialog1', 'CLOSE_dialog2', 'CLOSE_date_dialog']),
  },
}

git-flow