Przeglądaj źródła

fix svg component children

Evan You 9 lat temu
rodzic
commit
afc414976c

+ 1 - 1
src/compiler/codegen.js

@@ -62,7 +62,7 @@ function genElement (el: ASTElement): string {
       // if the element is potentially a component,
       // wrap its children as a thunk.
       const children = !el.inlineTemplate
-        ? genChildren(el, !el.ns && !isPlatformReservedTag(el.tag) /* asThunk */)
+        ? genChildren(el, !isPlatformReservedTag(el.tag) /* asThunk */)
         : null
       code = `_h('${el.tag}'${
         data ? `,${data}` : '' // data

+ 4 - 4
src/core/vdom/create-element.js

@@ -43,20 +43,20 @@ function _createElement (
   }
   if (typeof tag === 'string') {
     let Ctor
+    const ns = config.getTagNamespace(tag)
     if (config.isReservedTag(tag)) {
       // platform built-in elements
       return new VNode(
-        tag, data, normalizeChildren(children),
-        undefined, undefined, undefined, context, host
+        tag, data, normalizeChildren(children, ns),
+        undefined, undefined, ns, context, host
       )
     } else if ((Ctor = resolveAsset(context.$options, 'components', tag))) {
       // component
       return createComponent(Ctor, data, parent, context, host, children, tag)
     } else {
-      // unknown or namespaced elements
+      // unknown or unlisted namespaced elements
       // check at runtime because it may get assigned a namespace when its
       // parent normalizes children
-      const ns = config.getTagNamespace(tag)
       return new VNode(
         tag, data, normalizeChildren(children, ns),
         undefined, undefined, ns, context, host

+ 11 - 5
src/platforms/web/util/element.js

@@ -8,7 +8,7 @@ export const namespaceMap = {
   math: 'http://www.w3.org/1998/Math/MathML'
 }
 
-export const isReservedTag = makeMap(
+export const isHTMLTag = makeMap(
   'html,body,base,head,link,meta,style,title,' +
   'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
   'div,dd,dl,dt,figcaption,figure,hr,img,li,main,ol,p,pre,ul,' +
@@ -46,13 +46,19 @@ export const isNonPhrasingTag = makeMap(
   true
 )
 
-// this map covers namespace elements that can appear as template root nodes
-const isSVG = makeMap(
-  'svg,g,defs,symbol,use,image,text,circle,ellipse,' +
-  'line,path,polygon,polyline,rect',
+// this map is intentionally selective, only covering SVG elements that may
+// contain child elements.
+export const isSVG = makeMap(
+  'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font,' +
+  'font-face,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +
+  'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view',
   true
 )
 
+export const isReservedTag = (tag: string): ?boolean => {
+  return isHTMLTag(tag) || isSVG(tag)
+}
+
 export function getTagNamespace (tag: string): ?string {
   if (isSVG(tag)) {
     return 'svg'

+ 7 - 0
test/unit/modules/compiler/codegen.spec.js

@@ -285,6 +285,13 @@ describe('codegen', () => {
     )
   })
 
+  it('generate svg component with children', () => {
+    assertCodegen(
+      '<svg><my-comp><circle :r="10"></circle></my-comp></svg>',
+      `with(this){return _h('svg',[_h('my-comp',function(){return [_h('circle',{attrs:{"r":10}})]})])}`
+    )
+  })
+
   it('generate is attribute', () => {
     assertCodegen(
       '<div is="component1"></div>',