Vue.js学习与入门（六）Vue组件

最新推荐文章于 2024-04-30 08:37:00 发布

yi诺千金

最新推荐文章于 2024-04-30 08:37:00 发布

阅读量154

点赞数

分类专栏：前端开发 Vue学习与入门

本文链接：https://blog.csdn.net/yimelancholy/article/details/102857230

版权

前端开发同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Vue学习与入门

9 篇文章 0 订阅

订阅专栏

组件需要注册后才能使用，注册分为全局注册和局部注册。全局注册后，所有Vue实例都可以使用该组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <my_counter></my_counter>
    <my_counter></my_counter>
</div>
<script>
    //注册全局组件
    Vue.component('my_counter',{
        data:function(){
            return {
                count:0
            }
        },
        template:'<button @click="count++">点击了{{count}}次</button>'
    });
    var app = new Vue({
        el:'#app',
        data:{},

    });

</script>
</body>
</html>

在这个页面中，注册一个全局组件my-counter，这个组件显示的内容是在template选项中定义的，这里定义了一个<button>模板。点击按钮时，会对这个组件内data函数返回的数据count执行递增操作。

全局组件my-counter注册后，在父实例中可以使用<my-counter></my-counter>这样的形式来使用组件，这里my-counter使用了两次。

把父组件的数据传递给子组件，子组件会根据接收的数据来渲染不同的内容或执行不同的操作。要让子组件使用父组件的数据，需要通过子组件的props选项，使用静态props实现将父组件数据传递给子组件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <child message="Hello Vue!"></child>
</div>
<script>
    //注册全局组件
    Vue.component('child',{
        //声明props,期望从父组件获取数据message
        props:['message'],
        template:'<span>{{message}}</span>'
    });
    var app = new Vue({
        el:'#app',
        data:{},

    });

</script>
</body>
</html>

使用v-bind动态绑定props的值到父组件中，每当父组件的数据变化时，该变化也会传导给子组件。动态props实现将父组件数据传递给子组件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="parentMessage">
    <br>
    <child v-bind:message="parentMessage"></child>
</div>
<script>
    //注册全局组件
    Vue.component('child',{
        //声明props,期望从父组件获取数据message
        props:['message'],
        template:'<span>{{message}}</span>'
    });
    var app = new Vue({
        el:'#app',
        data:{
            parentMessage:'I\'m vue'
        },

    });

</script>
</body>
</html>

yi诺千金

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习与入门（六）Vue组件

组件需要注册后才能使用，注册分为全局注册和局部注册。全局注册后，所有Vue实例都可以使用该组件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="...
复制链接

扫一扫

专栏目录