上饶做网站建设,陕西住房和城乡建设厅网站6,网站域名需icp备案吗,素材网站开发目录
一、父子组件通信
1、子组件通过 props 获取父组件变量和父组件调用子组件中的方法(这两个都是父传子的思想)
a:子组件通过 props 获取父组件变量
b:父组件调用子组件中的方法
2、父组件通过ref获取子组件变量和子组件调用父组件的方法#xff08;这两个都是子传父的…目录
一、父子组件通信
1、子组件通过 props 获取父组件变量和父组件调用子组件中的方法(这两个都是父传子的思想)
a:子组件通过 props 获取父组件变量
b:父组件调用子组件中的方法
2、父组件通过ref获取子组件变量和子组件调用父组件的方法这两个都是子传父的思想
a:父组件通过ref获取子组件变量
b:子组件调用父组件的方法
3、总结
二、兄弟组件通信
1、通过 bus 进行兄弟组件通信
一、父子组件通信
1、子组件通过 props 获取父组件变量和父组件调用子组件中的方法(这两个都是父传子的思想)
a:子组件通过 props 获取父组件变量 方法关键字props 步骤(2步) 在父组件引用子组件标签中定义接受变量名并传值 。 公式:子组件接受变量名“父组件要传的变量名” 如 nowPriceFnowPrice 在子组件data()方法平级定义props对象接收变量。 公式props: { } 如props: {nowPriceF: Number} // 父组件
Add :nowPriceFnowPrice/Add
// 子组件
export default {props: {nowPriceF: Number},data() {}
}
b:父组件调用子组件中的方法 方法关键字ref、$refs 步骤(3步) 在父组件引用子组件标签中定义ref利用ref获取子组件变量。 公式ref“对子组件定义唯一ref值”,如 refaddChild 在父组件中直接调用子组件中的方法可传参数。子组件获取父组件变量也可以用这个方法。 公式this.r e f s . a d d C h i l d . 子 组 件 中 方 法 名 ∗ ∗ 如 ∗ ∗ t h is . refs.addChild.子组件中方法名** 如**this.refs.addChild.子组件中方法名∗∗如∗∗this.refs.addChild.calculateWithdrawal(row) 在子组件中执行调用的方法可获取参数。 公式定义普通方法一样,如calculateWithdrawal(row){ } /父组件
Add refaddChild :nowPriceFnowPrice/Add
//在所用的方法获取addForm:子组件中变量名
this.$refs.addChild.calculateWithdrawal(row)
calculateWithdrawal(row){console.log(父组件中调用了这个方法并传递了参数row)
}
2、父组件通过ref获取子组件变量和子组件调用父组件的方法这两个都是子传父的思想
a:父组件通过ref获取子组件变量 方法关键字ref 、$refs 步骤(2步) 在父组件引用子组件标签中定义ref利用ref获取子组件变量。 公式ref“对子组件定义唯一ref值” 如 refaddChild 在父组件中直接获取子组件中的变量。 公式this.$refs.addChild.子组件中变量名,如this.$refs.addChild.addForm //父组件
Add refaddChild :nowPriceFnowPrice/Add
//在所用的方法获取addForm:子组件中变量名
this.$refs.addChild.addForm
b:子组件调用父组件的方法 方法关键字$emit 步骤(2步) 在子组件中通过e m i t 调 用 父 组 件 中 定 义 的 方 法 将 变 量 以 参 数 带 过 去 。 公 式 在子组件中触发的函数里面写 t h i s . emit调用父组件中定义的方法将变量以参数带过去。 公式this.emit调用父组件中定义的方法将变量以参数带过去。公式在子组件中触发的函数里面写this.emit(‘传递到父组件的方法名’,需要传递的变量)”如 this.$emit(‘lookPhotos’,file.url) 在父组件引用子组件标签中获取子组件定义的方法并获得参数。 公式子组件定义传递到父组件的方法名父组件获取参数变量的方法($event),如lookPhotoslookPhotosUrl($event) //子组件
handlePictureCardPreview(file) {this.$emit(lookPhotos,file.url)//lookPhotos 定义传递到父元素的方法名//file.url 父元素要获取的东西
},
//父组件
Add refaddChild lookPhotoslookPhotosUrl($event) :nowPriceFnowPrice/Add
//在methods: {}中获取
lookPhotosUrl(url){console.log(父元素需要的东西url)
},
3、总结
a:父组件通过ref调用/获取子组件内参数/方法
b:子组件通过emit调用父组件方法
c:子组件通过prop获取父组件变量
二、兄弟组件通信
1、通过 bus 进行兄弟组件通信 步骤 a 在 main.js 文件内 将 new Vue() 挂载至 vue 原型上 b 在 接受 通信的组件内 使用 this.$bus.$on() 进行初始化 c 在 发起通信 组件内 使用 this.$bus.$emit(方法名, 参数1, 参数2...) // mian.jsimport Vue from vue
import App from ./App
import router from ./router
//重要Vue.prototype.$bus new Vue(); // 设置 挂载至 vue 的原型上new Vue({el: #app,router,components: { App },template: App/
})
父组件
templatediv classboxdiv我是父组件/divdiv styledisplay: flex!-- 子组件 1 -_- 我和 子组件2 是同级关系 所以是兄弟组件 -_- --baby1 classborder/baby1!-- 子组件 2 -_- 我和 子组件1 是同级关系 所以是兄弟组件 -_- --baby2 classborder/baby2 /div/div
/templatescript
import baby1 from /components/html/baby1.vue
import baby2 from /components/html/baby2.vueexport default {name: home,components:{baby1,baby2}
}
/script 子组件1
templatediv classboxdiv我是子组件1/divinput v-modelvalue stylewidth: 100%button clickhandleFetchHomeFunction将值 更新至 子组件2/button/div
/templatescriptexport default {name: baby1,data(){return{value: }},methods: {// 调用 兄弟组件 方法handleFetchHomeFunction(){this.$bus.$emit(valueUpdate, this.value)}}
}
/script 子组件2
templatediv classboxdiv我是子组件2/divinput v-modelvalue stylewidth: 100%/div
/templatescriptexport default {name: baby1,data(){return{value: }},mounted(){// 接收事件this.$bus.$on(valueUpdate, (value){this.value value;})},
}
/script
