Vue组件使用以及父子组件之间的通信

最新推荐文章于 2024-07-22 09:08:11 发布

多啦不能没有梦

最新推荐文章于 2024-07-22 09:08:11 发布

阅读量119

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_52117632/article/details/123171578

版权

一、组件使用

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="vue-2.6.10.js"></script>
</head>
<body>

<div id="app">
<%--    使用三个组件--%>
    <count></count>
    <count></count>
    <count></count>
</div>

<script type="text/javascript">
    // 定义组件
    const count={
        template:"<button @click='num++'>你点击了{{num}}次</button>",
        data(){
            return {num:0}
        }
    };

    var app=new Vue({
        el:"#app",
        components:{
            count:count   //组件名称：具体的组件对象
        }
    });

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

二、父组件向子组件通信

2.1父组件将简单字符串更新传递到子组件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
<%--    使用名为introduce的组件--%>
    <introduce :title="msg"></introduce>
</div>

<script type="text/javascript">
    const introduce={
        template:"<h2>{{title}}</h2>",
        props:["title"]  //定义接收父组件的属性
    }
    Vue.component("introduce",introduce);//全局注册组件

    var app=new Vue({
        el:"#app",
        data:{
            msg:"父组件msg属性数据内容"
        }
    });

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

2.2父组件将数组更新传递到子组件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="vue-2.6.10.js"></script>
</head>
<body>

<div id="app">
<my-list :items="lessons"></my-list>

    <script>
        const myList={
            template:"<ul>\n" +
                " <li v-for=\"item in items\" :key=\"item.id\">{{item.id}}--{{item.name}}</li>\n" +
                "</ul>",
            props:{
                items:{
                    type:Array,
                    default:[]
                }
            }

        }

    </script>

</div>

<script type="text/javascript">

    var app=new Vue({
        el:"#app",
        data:{
            msg:"父组件的msg属性数据内容",
            lessons:[
                {"id":1,"name":"数学"},
                {"id":2,"name":"语文"},
                {"id":3,"name":"体育"}
            ]
        },
        components:{
            myList
        }

    });
</script>

</body>
</html>

三、子组件向父组件通信

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="vue-2.6.10.js"></script>
</head>
<body>

<div id="app">
    <h1>{{num}}</h1>
    <counter @plus="numPlus" @reduce="numReduce" :sum="num"></counter>
    <script>

        const counter={
            template:"<div>\n" +
                "            <button @click='increaseNum'>+</button>\n" +
                "            <button @click='declareNum'>-</button>\n" +
                "            </div>",

        props:["sum"],
            methods:{
                increaseNum(){
                    //调用父组件中的方法
                    return this.$emit("plus");
                },
                declareNum(){
                    //调用父组件中的方法
                    return this.$emit("reduce");
                }
            }
        }
    </script>

</div>

<script type="text/javascript">

    var app=new Vue({
        el:"#app",
        components:{
            counter:counter
        },
        data:{
            num:0
        },
        methods: {
            numPlus(){
                this.num++;
            },
            numReduce(){
                this.num--;
            }
        }
    });

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