return返回html标签的问题

当你使用return返回如：<span class=’mtClass’>标签</span>

此类的话，返回时可能由于你的js运行在vue的实例化之后，这样它的渲染是无法渲染组件标签的。如elementUI的el-button.

若这时你返回<el-button>按钮</el-button>，在页面渲染时，它会直接标签化渲染成
<el-button>按钮</el-button>

正确应该是要渲染成<button class=’el-button’>按钮</button>

解决办法：

1.你直接用html的标签然后自己写样式改

2.用render函数写jxs代码

JSX是JavaScript XML的简写，表示在JavaScript代码中写XML ( HTML）格式的代码。

Vue渲染组件底层用的是render函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 31</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // render function
  // template -> render -> h -> 虚拟DOM（JS对象）-> 真实 DOM -> 展示到页面上
  const app = Vue.createApp({
    template: `
      <my-title :level="2">
        hello dell
      </my-title>
    `
  });

  app.component('my-title', {
    props: ['level'],
    render() {
      const { h } = Vue;
      return h('h' + this.level, {}, [
        this.$slots.default(),
        h('h4', {}, 'dell')
      ])
    }
  })

  const vm = app.mount('#root');
</script>
</html>

发表评论 取消回复

发表评论取消回复