vue组件 左手的ㄟ右手 2022-05-13 23:23 276阅读 0赞 ## 全局组件 ## <!-- 全局组件定义 --> Vue.component('todo-list',{ template:"<li>{ {content}}</li>" }) <!-- 组件使用--> <todo-list></todo-list> ## 局部组件 ## <div id="app"> <todolist ></todolist> </div> <script type="text/javascript"> <!-- 局部组件定义 --> var todolite={ template:"<div>hello</div>" } var app=new Vue({ el:"#app", // 引入局部组件 components:{ 'todolist':todolite } }); </script> ## 组件传值和接收 ## <div id="app"> <ul> <!-- v-bind:content="item" 组件传值 --> <todo-list v-for="item in list" v-bind:content="item"></todo-list> </ul> </div> <script type="text/javascript"> <!-- 组件定义 --> Vue.component('todo-list',{ // 组件接收数据 props:['content'], template:"<li>{ {content}}</li>" }) </script> ## 父组件和子组件传递数据 ## //父子组件交互案例 <body> <div id="app"> <input type="text" v-model="msg"> <button v-on:click="handle">提交</button> <ul> //父组件给子组件传递值用v-bind: <todo-list v-for="(item,index) in content" v-bind:item="item" v-bind:index="index" v-on:delete="delHandle"></todo-list> </ul> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 局部注册 var todo={ props:['item','index'], template:'<li v-on:click="del">{ {item}}</li>', methods: { del:function (){ // 触发当前实例上的事件。附加参数都会传给监听器回调 //子组件向父组件传递 this.$emit('delete',this.index); } } } var app=new Vue({ el:"#app", data:{ content:[], msg:"" }, methods: { handle:function(event){ this.content.push(this.msg); this.msg=""; }, delHandle:function(index){ this.content.splice(index); } }, components: { 'todoList':todo } }) </script> </html>
还没有评论,来说两句吧...