props和attrs

最新推荐文章于 2024-05-31 10:39:27 发布

qq l vz z

最新推荐文章于 2024-05-31 10:39:27 发布

阅读量477

点赞数

分类专栏： Vue笔记文章标签： Vue props和attrs 评论列表案例

本文链接：https://blog.csdn.net/qq_34362251/article/details/83618071

版权

Vue笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

attrs

<!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="./lib/vue.min.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <son id="box" title="我是title" checked='ture' class="red" style="color: red;"></son>
    </div>


    <script>
        Vue.component('son', {
            template: `<div><h1>我是一个son组件</h1><p>我是一个P</P></div>`,
            mounted() {
                //this.attr这个实例属性，能够取到用在组件上的一些个属性和特性，知识style和class是个例外
                console.log(this.$attrs) //{id: "box", title: "我是个title", checked: "true"}



            }
        })


        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我是根'
            }
        })
    </script>
</body>

</html>

props

<!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="./lib/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <son id="box" title="我是个title" checked="true" class="red" style="color: red;"></son>
    </div>



    <script>
        Vue.component('son', {
            data() {
                return {
                    msg: 'hello'
                }
            },
            //下面这个就规定了。如果使用son这个组件的时候，在son这个标签上面有传title这个属性，那么这个title属性，就会是这个son组件需要的一个props
            //这个时候$attrs取不到title了
            //props才能取到title
            props: ['title', 'checked'],
            template: `<div>
                        <h1>我是个 son 组件</h1>
                        <p>我是个 屁</p>
                        </div>`,
            mounted() {
                //this.$props这个实例属性，能够取到组件定义的props数据
                //1现在数组中定义props那么props定义的东西可以直接当做data的数据来使用
                console.log(this.$attrs) //{id: "box"}
                console.log(this.$props) //checked: "true" title: "我是个title"

                console.log(this.msg) //hello
                console.log(this.title) //我是个title
                console.log(this.$props.title) //我是个title
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我是根'
            }
        })
    </script>
</body>

</html>

props案例

<!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="./lib/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <ye-header title="首页"></ye-header>
        <ye-header title="列表页"></ye-header>
        <ye-header title="关于叶"></ye-header>
    </div>


    <script>
        //props干的事就是父像子传参
        Vue.component('ye-header', {
            props: ['title'], //可以当做data来使用
            template: `<header>{{ title }}</header>`
        })
        var vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>

案例评论列表案例

<!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>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <cmt-box @func='loadComments'> </cmt-box>
        <ul class="list-group">
            <li class="list-group-item" v-for='item in list' :key='item.id'>
                <span class="badge">评论人：{{item.user}}</span>
                {{item.content}}
            </li>
        </ul>

    </div>


    <template id="tmp1">
        <div>
            <div class="form-group">
                <label>评论人</label>
                <input type="text" class="form-control" v-model='user'>
            </div>
            <div class="form-group">
                <label>评论内容</label>
                <textarea type="text" class="form-control" v-model='content'></textarea>
            </div>

            <div class="form-group">
                <input type="button" value="发表评论" class="btn  btn-primary" @click='postComment'>
            </div>
        </div>
    </template>

    <script>
        var commentBox = {
            data() {
                return {
                    user: '',
                    content: ''
                }
            },
            template: '#tmp1',
            methods: {
                postComment() { //发表评论的方法
                    var comment = {
                        id: Date.now(),
                        user: this.user,
                        content: this.content
                    }
                    var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                    list.unshift(comment)
                    localStorage.setItem('cmts', JSON.stringify(list))
                    this.user = this.content = ''
                    this.$emit('func')
                }

            }
        }

        var vm = new Vue({
            el: '#app',
            data: {
                list: [{
                        id: Date.now(),
                        user: '李白',
                        content: '天生我材必有用'
                    },
                    {
                        id: Date.now(),
                        user: '江小白',
                        content: '劝君更尽一杯酒'
                    },
                    {
                        id: Date.now(),
                        user: '小马',
                        content: '我姓马， 风吹草低见牛羊的马'
                    }
                ]
            },
            created() {
                this.loadComments()
            },
            methods: {
                loadComments() {
                    var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                    this.list = list
                }
            },
            components: {
                'cmt-box': commentBox
            }
        })
    </script>
</body>

</html>