【精选】vue前端面试题之vue组件传递参数 |
您所在的位置：网站首页 › vue组件传参 › 【精选】vue前端面试题之vue组件传递参数 |
【精选】vue前端面试题之vue组件传递参数
|
父子组件传递参数（props / $emit）
这个比较容易实现，我们只需要在组件上绑定自定义属性名就可以通过子组件中的props属性接受。看下面代码： 父组件代码parent.vue 向子组件中发送data 子组件给我传过来的参数--> {{childrenData}} import children from "@/views/children.vue" export default { data(){ return{ content:"", childrenData:"" } }, components:{ children }, methods:{ btnClick(){ this.content = "hello children!" }, getData(msg){ this.childrenData = msg } } }children.vue 我是孩子组件 父组件给我传过来的数据是{{ content }} 给父组件打招呼 export default { props: { content: { type: String, require: true, }, }, data(){ return { message:"hello parent" } }, methods: { childrenFn() { this.$emit("parentFn",this.message) }, }, };父传子：在parent组件中注册一个组件，然后父亲通过按钮发送content内容。绑定属性content 即子组件上:属性名，然后子组件内通过props去接收父组件传来的content。然后直接拿去渲染就可。平时父子传值用的还是比较多的。但是子组件如果想修改值，可以将props的值交给data里面的数据去处理。不建议修改props属性本身的值。 子传父：在子组件中通过this.$emit(“事件委托名”,payload)发送数据。父组件需通过绑定事件委托名，实现其传递数据。在这里我踩了个坑，绑定事件委托时，一定要在子组件本身上绑定。要不然，是监听不到子组件发送的委托事件的。 兄弟之间传递参数（$emit / $on 即eventBus）cpn1.vue 我是大哥 二弟回我的话:{{message}} 向二弟说 二弟，今天我们去哪玩啊 import Bus from "./bus.js" export default { data(){ return { message:"" } }, created(){ Bus.$on("sendCpn1",(res)=>{ this.message = res }) }, methods:{ cpn1Click(){ Bus.$emit("sendCpn2","二弟，今天我们去哪玩啊") } } }cpn2.vue 我是二弟 大哥给我说的话:{{ message }} 回大哥的话说 大哥,今天我们去三亚吧 import Bus from "./bus.js"; export default { data() { return { message: "", }; }, created() { Bus.$on("sendCpn2", (msg) => { this.message = msg; }); }, methods: { chickBtn() { Bus.$emit("sendCpn1", "大哥,今天我们去三亚吧"); }, }, };通过Bus将两个组件扭在一起，一个发送一个事件委托，一个去监听事件。知道这个Bus能够传递参数就可以。我反正不推荐用这个去写传递内容。因为自己在用的时候，觉得不是很好用。使用这个来回操作页面的话就会有很多监听。而且使用这种方式需要将Bus都导入到组件当中。当然，有人也会说可以直接挂在到Vue.propertotype上就可以实现全部的Bus。这个东西，一般有很多需要注意的地方。 操作dom传递参数（$parent / $root, $refs）parent.vue parent(爷爷 root) 内容:爷爷,过年的时候给你个压岁包 import cpn1 from "@/views/cpn1.vue" export default { data(){ return{ content:"爷爷,过年的时候给你个压岁包", } }, components:{ cpn1 } }cpn1.vue 我是父亲(parent) 内容:在学校要好好学习啊 看看children的学习状态 import children from "@/views/children.vue" export default { data(){ return { message:"在学校要好好学习啊" } }, components:{ children }, methods:{ seeChildrenStatus(){ alert(this.$children[0].studyStatus) } } }children.vue 我是children 回复爷爷 回复父亲 拿到自己的dom元素 export default { data(){ return { message:"好的", studyStatus:"努力拼命的学习" } }, methods: { btnClick() { console.log(this.$root); }, btnClick2(){ alert(this.$parenssage) }, btnClick3(){ alert(this.$refs.act.innerHTML); } }, };这里面的$ root，$ parent都能够实现访问父组件的属性的方法，两者的区别在于，如果存在多级子组件，通过$parent访问得到的是它最近一级的父组件，通过 $root访问得到的是根组件。当我们用 $ children获取子组件时，这时候子组件是个数组。我们需要通过下标来进行相应的操作。 vuex状态管理首先我们贴上官网 vuex官网 Vuex有五个核心概念 state、getter、mutations、actions、modules 异步：this. $ store.dispatch(“actions方法名”,value) 同步: this. $ store.commit(“mutations方法名”,value) |
【本文地址】
今日新闻 |
推荐新闻 |