Vue组件

vue组件

<div id="app">
<!--组件: 传递给组件中的值,  通过props 去接收-->
<name v-for="m in message" v-bind:result="m"></name>
</div>
<!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //定义一个Vue component 组件
    Vue.component("name",{
        props: ['result'],
            //模板
            template:'<li>{{result}}</li>'
    });

var vm = new Vue({
    el: "#app",
    data: {
        message: ["牛人","狂人","飞人"]
    }
});
</script>

说明

• Vue.component():注册组件
• my-component-li:自定义组件的名字
• template:组件的模板
• props属性传递参数:需要传递参数到组件上,所以就需要这个props属性

总结

• 第一步:编写new Vue对象
• 第二步:遍历message的数据
• 第三步:要遍历的值赋值给component里面,前提需要一个中间件 在name标签加上 v-bind:result 的值就是遍历的结果 ,result就是
• 第四步:props,接收一个参数,这个参数是 v-bind的值