自定义组件和参数传递

最新推荐文章于 2023-05-09 18:07:43 发布

你若盛开风景自来

最新推荐文章于 2023-05-09 18:07:43 发布

阅读量722

点赞数

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

本文链接：https://blog.csdn.net/li1484155613/article/details/101922270

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

（1） list:自定义组件 li:要替换的组件 components:注册函数 template:替换的关键字
（2）参数传递:props:[数据1,数据2]接受数组类型值,可以把父类组件的值传给子类组件

全局组件

 全局组件
        Vue.component("list",{
            template:"<li>{{cons}}</li>",
            props:["cons"]

        })

局部组件

 components:{//局部注册
                // list父类组件    li子类组件   template替换关键字
                "list":{
                    template:"<li>{{cons}}</li>",
                    props:["cons"]//获得标签里的属性
                }
            },

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <input type="button" value="添加" @click=add>
        <ul>
            <list v-for="value in arr" v-bind:cons="value">{{value}}</list>
        </ul>
    </div>
    <script>
        //全局组件
        // Vue.component("list",{
        //     template:"<li>{{cons}}</li>",
        //     props:["cons"]

        // })
        new Vue({
            el:"#app",
            data:{
                msg:"",
                arr:[]
            },
            components:{//局部注册
                // list父类组件    li子类组件   template替换关键字
                "list":{
                    template:"<li>{{cons}}</li>",
                    props:["cons"]//获得标签里的属性
                }
            },
            methods:{
                add:function(){
                    this.arr.push(this.msg)
                }
            }

        })
    </script>
</body>
</html>

你若盛开风景自来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义组件和参数传递

（1） list:自定义组件 li:要替换的组件 components:注册函数 template:替换的关键字（2）参数传递:props:[数据1,数据2]接受数组类型值,可以把父类组件的值传给子类组件全局组件全局组件 Vue.component("list",{ template:"<li>{{cons}}</li&g...
复制链接

扫一扫