父组件往子组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--父组件通过调用v-bind把自己的nameList传递给子组件-->
    <my-button v-for="(item,index) in nameList"
               v-bind:key="index"
               v-bind:name="item"
    ></my-button>
</div>
<script src="vue.js"></script>
<script>

    //注册全局组件  子组件
    Vue.component("my-button",{
        template:`<h1>{{ this.name }}</h1>`,
        props:["name"],  //告诉别人这里需要传入一个name参数
        data(){
            return{ }
        }
    });

    // 根实例  父组件
    let app = new Vue({
        el:"#app",
        data:{
            nameList:["alex","wusir","mjj"]
        }
    })
</script>
</body>
</html>

posted on 2019-01-06 23:15 KD_131 阅读(120) 评论(0) 收藏举报