龙海网站定制,犀牛云做网站编辑上传,母婴用品网站建设规划,cms类型网站开发1. 组件传值
组件化编码流程#xff1a; 拆分静态组件#xff1a;组件要按照功能点拆分#xff0c;命名不要与html元素冲突实现动态组件#xff1a;考虑好数据的存放位置#xff0c;数据是一个组件在用#xff0c;还是一些组件在用#xff1a; 一个组件在用#xff0c…1. 组件传值
组件化编码流程 拆分静态组件组件要按照功能点拆分命名不要与html元素冲突实现动态组件考虑好数据的存放位置数据是一个组件在用还是一些组件在用 一个组件在用放在组件自身即可一些组件在用放在他们共同的父组件上状态提示 实现交互从绑定事件开始 props适用于 父组件 子组件 通信子组件 父组件 通信要求父先给子一个事件组件接收形式 1. props: [xxx]2. props:{xxx:{type: String,required: true // 必传},xxx:{type: Number, // 类型default: 20 // 默认值...自定义校验等等}}3. props:{xxx: Number // 设置类型xxx:{type: Number, // 类型default: 20 // 默认值...自定义校验等等}} props接收的值不可以修改
示例 我们只需要四个组件父组件APP.vue子组件SelectInput.vue、SelectList .vue、SelectMulDel.vue需求子组件操作数据改变父组件内的列表数据实现增删 1. 文件目录:components文件夹内创建子组件文件 2. 在父组件APP.vue中引入3个子组件 因为所有的子组件共同需要用到列表的数据所以数据写在父组件内 因为操作的数据在父组件内部。所以和操作方法都写在父组件内 templatedivSelectInput :addDataListaddDataList/SelectInputSelectList :daListdataList :delDataListdelDataList/SelectMulDel :mulDelDataListmulDelDataList/SelectMulDel/div
/template
script
import SelectList from ./components/SelectList.vue
import SelectInput from ./components/SelectInput.vue
import SelectMulDel from ./components/SelectMulDel.vue
export default {name: App,components:{SelectList,SelectInput,SelectMulDel},data(){return {// 数据创建在父组件内dataList:[{ name: 小红, checked: false},{ name: 小绿, checked: false},]}},methods:{// 添加数据addDataList(val){this.dataList.push(val)},// 删除数据delDataList(index){this.dataList.splice(index, 1) },// 批量删除mulDelDataList(){console.log(this.dataList);this.dataList this.dataList.filter(item !item.checked)}}
}
/script子组件SelectInput.vue中 编写添加数据和添加按钮功能 通过props传入的添加方法实现添加功能 templatediv classcontainerinput typetext v-modelvaluebutton clickadd添加/button/div
/template
script
export default{props:[addDataList],data(){return {value: 小美丽}},methods:{add(){console.log(this.value);this.addDataList({ name: this.value, checked: false })}}
}
/script子组件SelectList.vue中 展示列表数据和行内删除 通过props传入的删除方法实现行内删除功能 templatediv classcontainerul!-- 批量删除 key为唯一值 假设name不可以重复 --li v-for(item, index) in daList :keyitem.name!-- v-model双向绑定直接改变值就相当于改变props传入的值,引起错误 --!-- input typecheckbox v-modelitem.checked changeitem.checked !item.checked --input typecheckbox :valueitem.checked changeitem.checked !item.checked{{ item.name }}button clickdel(index)删除/button/li/ul/div
/templatescript
export default{props:[daList, delDataList],methods:{del(index){// props 传入的值不允许改变// this.daList.splice(index, 1) this.delDataList(index, 1) }}
}
/script
style scoped
.container{background-color: antiquewhite;
}
ul{list-style: none;
}
/style子组件SelectMulDel.vue中 展示列表数据的选择行为 通过props传入的批量删除方法实现批量删除功能 templatedivbutton clickmulDelete批量删除/button/div
/template
script
export default{props:[mulDelDataList],methods:{mulDelete(){this.mulDelDataList()},}
}
/script展示效果点击功能ok
2. 组件的自定义事件
一种组件间通信的方式适用于子组件父组件使用场景A是父组件B是子组件B想传给A那么就要在A中给B绑定自定义事件事件的回调在A中绑定自定义事件 第一种方式在父组件中Demo my-eventtest/Demo第二种方式在父组件中 Demo refdemo/Demo
....
mounted(){this.$refs.xxx.$on(my-event, this.test)
}若想让自定义事件只能触发一次可以使用once修饰符或$once方法 触发自定义事件this.$emit(my-event, 数据)解绑自定义事件this.$off(my-event)组件上也可以绑定原生DOM事件需要使用native修饰符
示例上述的props案例是父组件将数据和操作方法统一已props形式传入子组件子组件还需接收才可使用现在我们将自定义事件编写在此已SelectInput.vue为例
第一种自定义事件方式
App.vue内修改为addDataList 接收子组件传过来的自定义事件 SelectInput addDataListaddDataList/SelectInput子组件内SelectInput.vue修改为
templatediv classcontainerinput typetext v-modelvalue /button clickadd添加/button/div
/templatescript
export default {data() {return {value: 小美丽,};},methods: {add() {this.$emit(addDataList, { name: this.value, checked: false });// 可emit提交多个自定义事件},},
};
/script第二种自定义事件ref方式
App.vue内修改为 SelectInput 标签上添加ref属性生命周期mounted中通过$on绑定事件生命周期beforeDestroy中通过$off移除自定义事件 SelectInput refMyInput/SelectInput
...
mounted() {this.$refs.MyInput.$on(addDataList, this.addDataList);},beforeDestroy() {this.$refs.MyInput.$off(addListInput);// this.$refs.MyInput.$off(); // 可以不传参数移除所有自定义事件},子组件内SelectInput.vue修改和一样
