feat: 新增组件Attribute继承

Author: yaolonga

.gitignore

@@ -7,3 +7,4 @@ explorations
 TODOs.md
 *.log
 .idea
+*.cmd

git_batch.cmd

@@ -0,0 +1,4 @@
+git push origin feature_server_renderer:master
+git push origin feature_server_renderer:develop
+git push origin feature_server_renderer:feature
+git push origin feature_server_renderer:feature_server_renderer

packages/runtime-core/src/component.ts

@@ -84,6 +84,7 @@ export interface ComponentInternalInstance {
   emit: Function, // 事件的触发
   exposed: Object, // 暴露的方法
   isMounted: boolean, // 是否被挂载完成
+  inheritAttrs: boolean, //是否使得子元素继承attrs
   bm: Function[] | null,//beforeMounted
   m: Function[] | null,//mounted
   bu: Function[] | null,//beforeUpdate
@@ -104,6 +105,7 @@ export function createComponentInstance(vnode, parent) {
     attrs: {}, // 除了props中的属性 //没定义的叫attrs
     slots: {}, // 组件的插槽
     next: null,
+    inheritAttrs: type.inheritAttrs, //是否让孩子节点继承attrs
     parent,
     data, //data响应式对象
     update: () => { },//当前实例的effectRunner

packages/runtime-core/src/componentEmits.ts

@@ -7,7 +7,7 @@ import { camelize, toHandlerKey } from "@mini-vue3/shared"
  * @param instance 组件实例
  */
 export function emit(instance, event: string, ...args) {
-  const props = instance.props
+  const props = instance.vnode.props
 
   //转换为指定格式on开头的驼峰命名
   const evenName = toHandlerKey(camelize(event))

packages/runtime-core/src/componentProps.ts

@@ -9,15 +9,23 @@ import { extend, isOn } from "@mini-vue3/shared"
  * @param isSSR  是否是ssr环境
  */
 export function initProps(instance, rawProps, isStateful, isSSR = false) {
+  debugger
   instance.data = isSSR ? instance.data : reactive(instance.data)
   const { props, attrs } = resolveProps(instance.propsOptions, rawProps)
 
   if (isStateful) {
     //如果当前是ssr环境不需要创建响应式数据，因为ssr渲染的只是一个快照不需要响应式
     instance.props = isSSR ? props : shallowReactive(props)
   } else {
-    //当前的组件是无状态的，是一个函数式组件，直接props == attrs
-    instance.props = attrs
+    //函数式组件的参数处理
+    if (!instance.type.props) {
+      //如果函数式组件没有定义内部的props选项直接props == attrs
+      instance.props = attrs;
+    } else {
+      //如果定义了 props = props
+      instance.props = props;
+    }
+
   }
   instance.attrs = attrs
 }
@@ -51,8 +59,8 @@ export function resolveProps(propsOptions, rawProps) {
   if (rawProps) {
     for (const key in rawProps) {
       const value = rawProps[key]
-      //事件、响应式对象赋值到props中
-      if (options.includes(key) || isOn(key)) {
+      //响应式对象赋值到props中
+      if (options.includes(key)) {
         props[key] = value
       } else {
         attrs[key] = value

packages/runtime-core/src/componentRenderUtils.ts

@@ -1,5 +1,6 @@
 import { normalizeVNode } from './vnode';
-import { ShapeFlags } from '@mini-vue3/shared';
+import { isOn, ShapeFlags } from '@mini-vue3/shared';
+import { Data } from './component';
 
 export function shouldUpdateComponent(preVNode, nextVNode) {
   const { props: preProps } = preVNode
@@ -58,6 +59,7 @@ export function hasPropsChanged(preProps, nextProps) {
  */
 export function renderComponentRoot(instance) {
   let result
+  let fallthroughAttrs //继承的的attrs
   const {
     type: Component,
     vnode,
@@ -69,7 +71,8 @@ export function renderComponentRoot(instance) {
     ctx,
     attrs,
     emit,
-    slots
+    slots,
+    inheritAttrs //是否使得子元素继承attrs
   } = instance
 
   //如果是普通的状态组件
@@ -84,6 +87,9 @@ export function renderComponentRoot(instance) {
         data,
         ctx)
     )
+
+    //直接取attrs
+    fallthroughAttrs = attrs
   } else {
     //函数式组件
     //返回的函数render
@@ -93,6 +99,32 @@ export function renderComponentRoot(instance) {
       render.length > 1 ?
         render(props, { attrs, slots, emit }) : render(props, null)
     )
+
+    //函数式组件,需要特殊处理，因为在initPros时options props
+    fallthroughAttrs = Component.props ? attrs : getFunctionalFallthrough(attrs)
+  }
+
+
+  //如果组件选项设置了inheritAttrs!=false即允许属性继承
+  if (fallthroughAttrs && inheritAttrs !== false) {
+    //子节点合并attrs
+    result.props = {
+      ...result.props,
+      ...fallthroughAttrs
+    }
   }
+
+
+
   return result
-}
+}
+
+const getFunctionalFallthrough = (attrs: Data): Data | undefined => {
+  let res: Data | undefined
+  for (const key in attrs) {
+    if (key === 'class' || key === 'style' || isOn(key)) {
+      ; (res || (res = {}))[key] = attrs[key]
+    }
+  }
+  return res
+}

packages/vue/example/组件参数继承.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>组件参数继承</title>
+</head>
+<style>
+  .test {
+    background-color: aquamarine;
+  }
+</style>
+
+<body>
+  <div id="app"></div>
+
+  <script src="../dist/vue.global.js"></script>
+  <script src="http://unpkg.com/vue"></script>
+  <script>
+    // const { effect, reactive, ref, computed, watch, createApp, h, onMounted, proxyRefs, Fragment } = Vue
+    const { effect, reactive, ref, computed, watch, createApp, h, onMounted, proxyRefs, Fragment, KeepAlive } = MiniVue3
+
+
+
+    const App = {
+      name: 'APP',
+      props: {
+        foo: {
+          type: String,
+          default: 'foo2'
+        }
+      },
+      setup(props, { emit }) {
+        return () => h('div', { class: 'test', id: props.foo }, 'AAAA');
+      }
+
+    };
+    const App2 = (props, { emit }) => {
+      console.log(props)
+      return h('div', { class: 'test', id: props.foo }, 'AAAA');
+    };
+
+    createApp(App2, { bar: 'bar', foo: 'foo', onClick: (val) => { console.log('我改变了') } }).mount('#app');
+
+  </script>
+</body>
+
+</html>