vue 中的render函数和ref-前端ABC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qdabc.cn</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- 替换<div id="app"></div> 包括 -->
<div id="app"></div>
<script>
    var abc = Vue.component('abc',{
      template: '<div id="app">这里是index</div>'
    });
    new Vue({
      el: '#app',
      render: function (h) {
        // console.log(h);
        // render是个函数 接收的一个参数 通过执行这个参数(  ) 并且return
        return h(abc) // 需要传递一个参数
      }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- ref="自定义的名字" -->
    <p @click="dom">点击</p>
    <ul ref="abc">
        <li> 123 </li>
    </ul>
    <div ref="def">

    </div>
</div>
<script>
    new Vue({
      el: '#app',
      methods: {
        dom () {
          console.log(this.$refs.abc);
        }
      }
    })
</script>
</body>
</html>

欢迎分享本文，转载请保留出处：前端ABC » vue 中的render函数和ref

vue 中的render函数和ref

相关推荐

发表评论 0