美文网首页
如何利用语法糖在Vue中自定义组件

如何利用语法糖在Vue中自定义组件

作者: 木羽木羽女口生 | 来源:发表于2020-12-26 01:22 被阅读0次

    你在组件中是不能利用到Vue中的数据的,你只能在你的组件里面定义一个data的返回函数,不能是数据结构,不然会报错。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <div>
            <aaa></aaa>
            <aaa></aaa>
            <aaa></aaa>
        </div>
    </div>
    
    <template id="aaa">
        <div>
            <h2>{{ title }}</h2>
            <p>我是内容,呵呵呵</p>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
      Vue.component('aaa',{
        template: '#aaa',
        data() {
          return {
            title: 'abc'
          }
        }
      })
      const app = new Vue({
        el: '#app',
        data: {
    
        }
      })
    </script>
    </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:如何利用语法糖在Vue中自定义组件

          本文链接:https://www.haomeiwen.com/subject/amzbnktx.html