父子組件通訊之props的命名以及屬性名

時間 2019-11-18

標籤父子組件通訊 props 命名以及屬性简体版

原文原文鏈接

父子組件通訊之prop命名採坑：html

<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>`

相關標籤/搜索