Vue写组件最最基础的坑

最新推荐文章于 2021-07-17 14:12:27 发布

WEGST

最新推荐文章于 2021-07-17 14:12:27 发布

阅读量254

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/WEGST/article/details/109142394

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

记vue组件开发遇到的坑

实例

根据文档的教程，输入的代码应该是长这样的

<script type="text/javascript">

        Vue.component('button-hi', {
            props:['title'],
            data: function () {
                //data必须是一个函数
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="count++"> clicked me {{count}} times</button>'
        })
        var vm=new Vue({//所有的vue组件都是vue实例
            el: "#components-demo",
            data: {
            
            }
        });
    </script>

遇到的坑

顺序问题
创建实例一定要在组件自定义后面，不然组件没有办法正确显示

相当于先定义一个变量，然后再创建对应的实例

在一个template里面无法使用多个element

你可以将模板的内容包裹在一个父元素内，来修复这个问题

    <template id="hahah">
        <div>
            <h3>This is the title:{{title}}</h3>
            <button v-on:click="count+=3"> clicked me {{count}} times</button>
        </div>
    </template>

在定义组件的html样式里面使用模板

直接采用document.querySelector获取html建好的元素

 <template id="tem">
        <div class='blog-test'>
            <h3>{{title}}</h3>
            <div></div>
        </div>
    </template>
    
        <script>
        let tem = document.querySelector('#tem')
        console.log(tem);
        Vue.component('blog-post', {
            template:tem,
            props: ['title'],//props接受传来的data
        })
        </script>

各个地方的data关系

组件模板里面的data，是可以在template里面展示的data
new Vue（{ }）里面的data：从页面获取数据，向组件模板传输数据

此处小坑，传输的数据类型问题

<html>
 <template id="tem">
        <div class='blog-test'>
            <h3>{{title}}</h3>
            <div></div>
        </div>
    </template>
    
 <div id="app">
        <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
    </div>
</html>

<script>
        Vue.component('blog-post', {
            template:tem,
            props: ['title'],//props接受传来的data
        })
        
 new Vue({
            el: "#app",
            data: {
                posts: [
                    { id: 1, title: "My journey with Vue" },
                    { id: 2, title: "Blogging with Vue" },
                    { id: 3, title: "Why Vue is so fun" }
                    
                ]
            }
        })
</script>

注意第三个v-bind：title=“post.title” 这里已经把post.title作为title 传下去了，在component里面获取的props是title，所以使用数据的时候也应该用title而不是post.title

对比&引入大量data的方法——对象


<html>
<template id="tem">
        <div class='blog-test'>
            <h3>{{post.title}}</h3>
            <div></div>
        </div>
    </template>
    
 <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
 </html>
 
 <script>
 Vue.component('blog-post', {
            template:tem,
            props: ['post'],//props接受传来的data
        })
 </script>