父子组件通信之props的命名以及属性名

最新推荐文章于 2022-09-09 12:44:30 发布

weixin_33755649

最新推荐文章于 2022-09-09 12:44:30 发布

阅读量584

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3407699/blog/1829142

版权

2019独角兽企业重金招聘Python工程师标准>>>

父子组件通信之prop命名采坑：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    </style>
</head>
<body>
<div class="app">
    <parent-component v-bind:children="childrenData"></parent-component>
    <!--绑定数据，将数据传到子组件中，属性名字不能用驼峰式或者烤串式，例如将children改成childrenD则就不行-->
    <!--<children-component v-bind:list="childrenData"></children-component>-->
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('childrenComponent',{
        props:['list'],
        template:`<ul><li v-for="item in list" @click="childMethod(item)">名字：{{item.name}}&nbsp--&nbsp 年龄：{{item.age}}</li></ul>`,
        methods:{
            childMethod:function (item) {
                this.$emit("parentmethod",item);
//                console.log(item)
            }
        }
    })
    Vue.component('parent-component',{
        data:function(){
            return {
                text:"初始数据"
            };
        },
        props:["children"],//父组件将数据传到子组件，props的命名不能是驼峰式或者烤串式
        template:`<div><p >{{text}}</p><children-component v-bind:list="children" v-on:parentmethod="text1"></children-component></div>`,
        //触发父组件的函数时，只需写函数名字，不需要写传参，例如不要写text1(item)
        methods:{
            text1:function (item) {
                console.log(item)
                this.text=item.name;
            }
        }
    })

    new Vue({
        el:'.app',
        data:{
            childrenData:[
                {
                    'name':'zhan',
                    'age':25
                },
                {
                    'name':'zhan1',
                    'age':26
                },
                {
                    'name':'zhan2',
                    'age':27
                },
                {
                    'name':'zhan3',
                    'age':28
                }
            ]
        }
    })
</script>
</body>
</html>`

转载于:https://my.oschina.net/u/3407699/blog/1829142