铜川市建设集团网站,东营网站建设入门,桂林人论坛网,陕西省建设银行分行网站1、组件个人理解#xff1a; 组件是页面的一部分#xff0c;将界面切分成部分#xff0c;每部分称为 组件2、组件化思想#xff1a; //2.1、定义一个全局的组件#xff0c;组件支持‘驼峰命名’规则Vue.component(TodoItem,{props: [content]… 1、组件个人理解 组件是页面的一部分将界面切分成部分每部分称为 组件 2、组件化思想 //2.1、定义一个全局的组件组件支持‘驼峰命名’规则 Vue.component(TodoItem,{props: [content], //接收父组件传递过来的数据template: li{{content}}/li})循环遍历 list , 每一次遍历都把值给 item , item 再通过 v-bind 把值传递给 content , compoent 通过 props 获取传递过来的数据。list 决定输出多少个 todo-item 组件ultodo-item v-foritem in list v-bind:contentitem/todo-item/ul //2.2、局部组件局部组建的使用需要注册到 vue 父组件模版中 var TodoItem {props:[content],template:li{{content}}/li
}var app new Vue({el:#app,components:{TodoItem:TodoItem},data:{list:[],inputValue:},methods:{submit:function () {this.list.push(this.inputValue);this.inputValue ;}}
}); //2.3、父组件向子组件传值 todo-item v-foritem in list v-bind:keyitem/todo-item 通过 v-bind 即可实现父组件向子组件传值子组件只需要通过 props:[key] 即可获取父组件传递的数据 //2.4、子组件向父组件传值 1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn var TodoItem {props:[content,index],template:li clickhandleItemClick{{content}}/li,methods:{handleItemClick: function(){this.$emit(delete,this.index);//触发父组件 delete 绑定事件,index为参数}}
}var app new Vue({el:#app,components:{TodoItem:TodoItem},data:{list:[],inputValue:},methods:{}
});
