Vue入门:自定义组件(全局组件/局部组件/props/v-bind知识点)

最新推荐文章于 2024-06-04 17:08:43 发布

第一段代码

最新推荐文章于 2024-06-04 17:08:43 发布

阅读量1.4k

点赞数 2

分类专栏：前端 Vue

本文链接：https://blog.csdn.net/godot06/article/details/107941500

版权

前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

Vue

9 篇文章 0 订阅

订阅专栏

0 组件

组件是可复用的 Vue 实例，且带有一个名字.下面就是一个典型的全局组件例子,组件的名字是 <button-counter>。

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

组件的详细官方文档见-组件基础

1 全局组件

1-1 创建全局组件

Vue.component("todo-item",{
        //组件的html模版,下方的li一看就是要放ul循环生成li的
        templete:"<li>Todo LiST</li>"
    })

1-2 使用组件:

上面定义了全局组件,而组件是有名字的,所以在html中,我们和普通标记一样,只是标记的名字,得换成我们自己定义的名字

<ul>
            <!-- <li v-for="item in list">{{item}}</li> -->
            <todo-item v-for="item in list"></todo-item>
        </ul>

1-3 向子组件传递数据

上面组件已经可以使用,但是发现没有我们在template中使用的都是固定的静态数据,并没有向其传递动态改变的数据!!!

问题是如果你不能向这个组件传递某一我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来.

通过 Prop 向子组件传递数据

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。

为了给ul->li组件传递一个值，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

1-3-1 修改组件,利用props传值

其中props中,后面的item就是要绑定的值(要跟下文html使用的v-bind联系使用)

template中{{item}},就是上述props中刚刚定义的绑定值itemContent;

Vue.component('blog-post', {
  props: ['item'],
  template: '<h3>{{ item}}</h3>'
})

1-3-2 在html组件中通过v-bind绑定组件定义的props值

        <ul>
            <!-- <li v-for="item in list">{{item}}</li> -->
            <todo-item v-bind:item="item" v-for="item in list"></todo-item>
        </ul>

v-bind:item="item" v-for="item in list" ----第一个item是作为v-bind绑定值名,这个是要和上面的props中的一致的,后面的item则是后面v-for中的item值传递过去的,通过这个操作for:item->v-bind:item->这个值就传递到了vue实例的props中了.

v-bind:动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。v-bind

Todo List实例代码

<!DOCTYPE html>
<html>
<head>
    <title>TODO LIST</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue"/>
        <input v-on:click="handleBtn" type="button" value="提交">
        <ul>
            <!-- <li v-for="item in list">{{item}}</li> -->
            <todo-item v-bind:item="item" v-for="item in list"></todo-item>
        </ul>
    </div>
</body>
</html>
<script type="text/javascript">
    Vue.component("todo-item",{
        //props绑定组件传值
        props:["item"],
        //组件的html模版,下方的li一看就是要放ul循环生成li的
        template:"<li>{{item}}</li>"
    });
    var app = new Vue({
        el:"#app",
        data:{
            list:["第一课的内容","第二课的内容"]
            ,inputValue:''
        },
        // 响应事件要定义在vue的methods方法中
        methods:{
            handleBtn: function(){
                this.list.push(this.inputValue);// 获取当前实例-app,data下的inputValue值,通过this即可
                this.inputValue = ''; // 点击后清空v-model绑定的输入框
            }
        }
    })
</script>

2 局部组件

局部组件和全局组件的写法区别就是，全局组件直接通过Vue.componet()声明,而局部组件是通过声明成一个js对象,如var todoItem = {}的方式,然后将这个申明的对象注册到Vue实例中的components属性中,作为自定义组件的引入.代码实例如下:

<body>
    <div id="app">
        <input type="text" v-model="inputValue"/>
        <input v-on:click="handleBtn" type="button" value="提交">
        <ul>
            <!-- <li v-for="item in list">{{item}}</li> -->
            <todo-item v-bind:item="item" v-for="item in list"></todo-item>
        </ul>
    </div>
</body>
</html>
<script type="text/javascript">
    // 局部组件
    var TodoItemValue = {
        props: ['item'],// 和全局组件一样,props中的属性值是html的v-bind中绑定的
        template:"<li>{{item}}</li>"
    }
    var app = new Vue({
        el:"#app",
        // 注册局部组件
        components:{
            TodoItem:TodoItemValue   // components第一个值TodoItem是html中使用的标签组件名,第二个TodoItemValue则是局部组件声明对象名
        },
        data:{
            list:["第一课的内容","第二课的内容"]
            ,inputValue:''
        },
        // 响应事件要定义在vue的methods方法中
        methods:{
            handleBtn: function(){
                this.list.push(this.inputValue);// 获取当前实例-app,data下的inputValue值,通过this即可
                this.inputValue = ''; // 点击后清空v-model绑定的输入框
            }
        }
    })
</script>

这三段代码得认真仔细看看,这是组件值相互绑定传值的写法.

额外,关注一下图中的组件名命名说明,即TodoItem会自动转成todo-item.

3 完整代码

<!DOCTYPE html>
<html>
<head>
    <title>TODO LIST</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue"/>
        <input v-on:click="handleBtn" type="button" value="提交">
        <ul>
            <!-- <li v-for="item in list">{{item}}</li> -->
            <todo-item v-bind:item="item" v-for="item in list"></todo-item>
        </ul>
    </div>
</body>
</html>
<script type="text/javascript">
    // 全局组件
    // Vue.component("todo-item",{
    //     //props绑定组件传值
    //     props:["item"],
    //     //组件的html模版,下方的li一看就是要放ul循环生成li的
    //     template:"<li>{{item}}</li>"
    // });
    // 局部组件
    var TodoItemValue = {
        props: ['item'],// 和全局组件一样,props中的属性值是html的v-bind中绑定的
        template:"<li>{{item}}</li>"
    }
    var app = new Vue({
        el:"#app",
        // 注册局部组件
        components:{
            TodoItem:TodoItemValue   // components第一个值TodoItem是html中使用的标签组件名,第二个TodoItemValue则是局部组件声明对象名
        },
        data:{
            list:["第一课的内容","第二课的内容"]
            ,inputValue:''
        },
        // 响应事件要定义在vue的methods方法中
        methods:{
            handleBtn: function(){
                this.list.push(this.inputValue);// 获取当前实例-app,data下的inputValue值,通过this即可
                this.inputValue = ''; // 点击后清空v-model绑定的输入框
            }
        }
    })
</script>

第一段代码

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue入门:自定义组件(全局组件/局部组件/props/v-bind知识点)

0 组件组件是可复用的 Vue 实例，且带有一个名字.下面就是一个典型的全局组件例子,组件的名字是<button-counter>。// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You c.
复制链接

扫一扫