vue :is使用

倒吊人
  • 35
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!--vue中驼峰 这里—加小写 -->
      <!-- <template-a :content='123'></template-a> -->
      <div :is='aaa'></div>
    </div>
    <script type="text/javascript">
      var aaa= {
        props: ['content'],
        template: "<div>{{content}}</div>"
      }
      var vm = new Vue({
        el: '#app',
        components : {
            aaa : aaa
        }
      })
    </script>
  </body>
</html>

这是我找的资料
当使用DOM作为模板时(例如,将el选项挂载到一个已知的元素上),你会受到HTML的一些限制,因为Vue只有在浏览器解析和标准化HTML后才能获取模板内容。尤其像这些元素<ul>,<ol>,<table>,<select>限制了能被它保过的元素,而一些像option这样的元素只能出现在某些其他元素的内部。
在自定义组件中使用这些受限制的元素时会导致一些问题,例如:

<table>
    <my-row>...</my-row>
</table>

自定义组件<my-row>被认为是无效的内容,因此在渲染的时候会出现导致错误。变通的方案是使用特殊的is属性:

...

这样写不是可以吗
我是哪里错了 为什么会报错

回复
阅读 1.6k
3 个回答

动态组件 名字是component 你写的div

建议这样写:

       components : {
        aaa : {
            props: {
                content: {
                    type: String,
                    default: () => {
                        return ''
                    }
                }
            },
            render: (h) => {
                return h('div', content)
            }
        }
    }

你可以写成

<table >
    <tr is="my-row" > </tr>
</table>

这是变通方法。。而且是文档里面的。所以要好好看文档哇

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏