12306网站建设费用,小程序开发一般采用的技术,关键词排名推广公司,十大电子商务平台vue实现组件通信的方式有#xff1a;
父子通信 父组件向子组件传递通过props定义各个属性来传递#xff0c;子组件向父组件传递通过$emit触发事件 ref也可以访问组件实例跨级通信 vuex bus provide / inject $attrs / $listeners解释 $attrs / $listeners $attrs 将父组件中…vue实现组件通信的方式有
父子通信 父组件向子组件传递通过props定义各个属性来传递子组件向父组件传递通过$emit触发事件 ref也可以访问组件实例跨级通信 vuex bus provide / inject $attrs / $listeners解释 $attrs / $listeners $attrs 将父组件中不被认为是props特性绑定的属性即在父组件中或者中间组件中没有在props中定义的属性传到孙组件中 $listeners 将父组件标签上的自定义事件向下传递其子组件可以直接通过$emit的方式调用 父组件传值给子组件 子组件可以全部不接受然后通过v-bind“$attrs”传给孙组件 然后孙组件直接使用props接受父组件传过来的所有属性普通的emit只能从子组件传到父组件 通过$listeners可以实现从孙子组件把事件传到父组件中去 不需要通过$emit逐层传递
!-- A.vue --
templatedivp这是父组件/pp参数: namefu age60 sexnan-fu addressshanghai-fu/phrB namefu age60 sexnan-fu addressshanghai-fu v-bind$attrs setValgetFuDetail/B/div
/templatescript
import B from ./B
export default {components: {B,},methods: {getFuDetail(val) {console.log(这是父组件的方法, val)}}
}
/scriptstyle/style!-- B.vue --
templatedivp这是子组件/pp参数namezi addressbeijing-zi/ppprops: name/ppattrs: {{ $attrs }}/pp因为在B组件中props中包含name 所以在attrs中只有age,sex,address/phrC namezi addressbeijing-zi v-on$listeners/C/div
/templatescript
import C from ./C.vue
export default {components: {C,},props: {name: { type: String, default: },},methods: {getZiDetail() {console.log(这是子组件的方法)}}}
/scriptstyle/style!-- C.vue --
templatedivp这是孙子组件/ppprops: age/ppattrs: {{ $attrs }}/pp因为在C组件中props定义了age 所以attrs中包含:父组件的name, sex, address子组件的name, address,而子组件的name, address覆盖了父组件的name, address/phr/div
/templatescript
export default {props: {age: { type: String, default: },},created() {this.getSunDetail()},methods: {getSunDetail() {console.log(这是孙组件的方法)this.$emit(setVal,通过$listeners触发父组件的事件)}}
}
/scriptstyle/style 通过$listeners在c组件触发了A组件的方法
