vue_01_函数式组件

函数式组件-全局弹窗组件

函数式组件定义

1. 在 template 上写上 functional
2. 在 export default {} 中设置 functional 为 true

// 方式一
<template functional><template>

// 方式二
export default {
  functional: true,
}


<script>
export default {
  functional: true,
  props: {},
  data(){
    return {}
  },
  render(h,contex) {
    console.log(context);
    return (
      <!-- html -->
      <div>JSX</div>
    )
  }
}

</script>

注意事项

1. 函数式组件没有 this。 因为，舍弃了this 自然就没有$emit这些惹
2. render的context中包含了方法，props，data.... 请自行查阅
3. 在服用组件的时候发现组件不更新可以使用key(不只是函数式组件哦) :key="Math.random"

业务组件设计

1. 接受提示的文字
2. isShow只依赖于外部，自身不存
3. 生命周期-取决于外部
4. 基于不需要的生命周期，不需要存贮自身数据，完全依赖于外部，极致优化

/**
 * 业务组件设计：
 * 	1. 接受提示的文字
 *  2. isShow只依赖于外部，自身不存
 *  3. 生命周期-取决于外部
 *  4. 基于不需要的生命周期，不需要存贮自身数据，完全依赖于外部，极致优化
 * 
 *  函数式组件: [阉割版组件]：没有this 因为舍弃了this所有$emit这些自然也不可以使用惹
 * 	 1. 在 template 上写上 functional
 *   2. 在 export default { functional:true }
 * 	 3. props 不写 那么 props 中的内容会在 data.attrs中
 * */

<template>
  <view>
    <!-- <message-box :value="isShow" @input="val => isShow = val"></message-box> -->
    <message-box 
      v-model="isShow"
      title="此处是标题"
      content="呵呵哈哈哈或"
      @submit="doSubmit"
      @cancel="doCancel"
      :key="Math.random()"
      ></message-box>
    <button @click="isShow=true">点击切换</button>
  </view>
</template>

<script>
  import MessageBox from "@/components/MessageBox.vue"
  export default {
    components: {MessageBox},
    data() {
      return {
        isShow: false,
      }
    },
    methods: {
      doSubmit: function(){
        console.log("doSubmit");
      },
      doCancel: function(){
        console.log("doCancel");
      }
    }
  }
</script>

<script>
	/**
	 * 业务组件设计：
	 * 	1. 接受提示的文字
	 *  2. isShow只依赖于外部，自身不存
	 *  3. 生命周期-取决于外部
	 *  4. 基于不需要的生命周期，不需要存贮自身数据，完全依赖于外部，极致优化
	 * 
	 *  函数式组件: [阉割版组件]：没有this 因为舍弃了this所有$emit这些自然也不可以使用惹
	 * 	 1. 在 template 上写上 functional
	 *   2. 在 export default { functional:true }
	 * 	 3. props 不写 那么 props 中的内容会在 data.attrs中
	 * */
  export default {
    functional: true,
    props: {
      value: {
        type: Boolean,
        required: true,
        default: false,
        // validator(value){
        // 	return value ? true : false;
        // }
        title: {
          type: String,
          required: true,
        },
        content: {
          type: String,
          required: true,
        }
      }
    },
    render(h, context) {
      console.log(context);
      const { input:change, submit, cancel } = context.listeners;
      const {value:show, title, content} = context.props;
      function close(tag) {
        tag? submit() : cancel();
        change(false);
      }
      return (
        show&&<view>
          <text>子组件</text>
          <text onClick={ close }>x</text>
          <text onClick={ e=>close(true) }>确认</text>
          <text onClick={ e=>close(false) }>取消</text>
        </view>
      )
    }
  }
</script>

<style >
  view {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  view text {
    width: 25%;
    text-align: center;
  }
</style>