微信小程序选项卡功能开发步骤与方法全解析
712
2023-01-02
vue转换小程序组件（小程序使用vue组件）
本篇文章给大家谈谈vue转换小程序组件，以及小程序使用vue组件对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
今天给各位分享vue转换小程序组件的知识，其中也会对小程序使用vue组件进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
微信文档地址vue转换小程序组件： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
一、安装weixin-js-sdk
版本要求1.6.0
二、config注入
三、页面引入
四、vue报错
vue会显示wx-open-launch-weapp组件未注册
在main.js中加入
五、效果展示
<script src="../libs/vue.js"</script
<div id="app"
<a href="" @click.prevent="tag = true"登录</a
<a href="" @click.prevent="tag = false"注册</a
组件的切换 1.v-if
<login v-if="tag"</login
<register v-else</register
<a href="" @click.prevent="seen = true"登录</a
<a href="" @click.prevent="seen = false"注册</a
组件的切换 2.v-show
<login v-show="seen"</login
<register v-show="!seen"</register
<a href="" @click.prevent="sendlogin"登录</a
<a href="" @click.prevent="flag = 'register'"注册</a
<!--组件的切换 3.component --
<!--component 是用来占位的，具体内容，还要根据is里的数据展示--
<!--is是用来指定要展示组件的名称的 is=“componentId”--
<component :is="flag"</component
</div
<template id="login"
<div
<h2login子组件的内容</h2
</div
</template
<template id="register"
<div
<h2register子组件的内容</h2
</div
</template
<script
//注意：html对大小写是不明感
//有大写字母的组件，需要转换成小写
//尽量不要用驼峰命名的规则命名组件，
//组件的名称
Vue.component('login', {
template: '#login'
})
Vue.component('register', {
template: '#register'
})
var app = new Vue({
el: '#app',
data: {
tag: true,
seen: true,
flag: 'login'
},
methods: {
sendlogin() {
this.flag = 'login'
}
}
})
</script
</body
1、vue如何使用element-ui
2、创建相应文件。
a、创建父组件 src/components/tabZujian.vue
b、创建自组件（被切换的组件）src/tabComponents 文件夹
+ + tabComponents（目录）
---- tabZujianChild1.vue
---- tabZujianChild2.vue
3、编写组件实现tab切换不同子组件
tabZujian.vue
<template
<div class="tabZujian"
<el-tabs v-model="activeName"
<el-tab-pane label="tab1" name="first" :key="'first'"
<child1</child1
</el-tab-pane
<el-tab-pane label="tab2" name="second" :key="'second'"
<child2</child2
</el-tab-pane
</el-tabs
</div
</template
<script
import tabZujianChild1 from '@/tabComponents/tabZujianChild1'
import tabZujianChild2 from '@/tabComponents/tabZujianChild2'
export default {
name: 'tabZujian',
components:{
child1:tabZujianChild1,
child2:tabZujianChild2
},
data() {
return { //默认第一个选项卡
activeName: "first",
}
}
}
</script
tabZujianChild1.vue
<template
<div class="child1" 我是第一个自组件 </div
</template
<script export default {
name: 'child1',
mounted(){
console.log("tab1组件")
}
} <
/script<
tabZujianChild2.vue
[template
<div class="child2" 我是第二个子组件 </div
</template
<script export default {
name: 'child1',
mounted(){
console.log("tab2组件")
}
} </script<
[
默认是tab1显示 切换到tab2显示也成功了
!* 但是不知道同学们是否注意到：
1、我在每个子组件的mounted生命周期钩子函数下分别打印了两个不同的文本
2、当路由到这个tab页面的时候，应该是没注意控制台是打印了当前显示的tab1组件中的console还是tab2组件的console
3、当你打开控制台的时候，你会很惊讶的发现。两个组件之中的console都被打印了。这说明，并不是我想象的，tab到1时候打印组件1；tab到2时候打印组件2
4、解决
这时候当你来回切换的时候，通过v-if判断是否重新渲染当前组件
更改一下tabZujian.vue
<template
<div class="tabZujian"
<el-tabs v-model="activeName" @tab-click="handleClick"
<el-tab-pane label="tab1" name="first" :key="'first'"
<child1 v-if="isChildUpdate1"</child1
</el-tab-pane
<el-tab-pane label="tab2" name="second" :key="'second'"
<child2 v-if="isChildUpdate2"</child2
</el-tab-pane
</el-tabs
</div
</template
<script
import tabZujianChild1 from '@/tabComponents/tabZujianChild1'
import tabZujianChild2 from '@/tabComponents/tabZujianChild2'
export default {
name: 'tabZujian',
components:{
child1:tabZujianChild1,
child2:tabZujianChild2
},
data() { return { //默认第一个选项卡
activeName: "first",
isChildUpdate1:true,
isChildUpdate2:false
}
},
methods:{
handleClick(tab) {
if(tab.name == "first") {
this.isChildUpdate1 = true;
this.isChildUpdate2 = false;
} else if(tab.name == "second") {
this.isChildUpdate1 = false;
this.isChildUpdate2 = true;
}
}
}
} </script
这回当你没吃切换tab的时候在注意v8的console
成功了 关于vue转换小程序组件和小程序使用vue组件的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 vue转换小程序组件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序使用vue组件、vue转换小程序组件的信息别忘了在本站进行查找喔。
本文目录一览：
vue项目-h5跳转小程序
根据微信vue转换小程序组件的开放标签wx-open-launch-weapp可以实现从h5页面跳转小程序的需求微信文档地址vue转换小程序组件： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
一、安装weixin-js-sdk
版本要求1.6.0
二、config注入
三、页面引入
四、vue报错
vue会显示wx-open-launch-weapp组件未注册
在main.js中加入
五、效果展示
Vue 组件切换的方式
<body<script src="../libs/vue.js"</script
<div id="app"
<a href="" @click.prevent="tag = true"登录</a
<a href="" @click.prevent="tag = false"注册</a
组件的切换 1.v-if
<login v-if="tag"</login
<register v-else</register
<a href="" @click.prevent="seen = true"登录</a
<a href="" @click.prevent="seen = false"注册</a
组件的切换 2.v-show
<login v-show="seen"</login
<register v-show="!seen"</register
<a href="" @click.prevent="sendlogin"登录</a
<a href="" @click.prevent="flag = 'register'"注册</a
<!--组件的切换 3.component --
<!--component 是用来占位的，具体内容，还要根据is里的数据展示--
<!--is是用来指定要展示组件的名称的 is=“componentId”--
<component :is="flag"</component
</div
<template id="login"
<div
<h2login子组件的内容</h2
</div
</template
<template id="register"
<div
<h2register子组件的内容</h2
</div
</template
<script
//注意：html对大小写是不明感
//有大写字母的组件，需要转换成小写
//尽量不要用驼峰命名的规则命名组件，
//组件的名称
Vue.component('login', {
template: '#login'
})
Vue.component('register', {
template: '#register'
})
var app = new Vue({
el: '#app',
data: {
tag: true,
seen: true,
flag: 'login'
},
methods: {
sendlogin() {
this.flag = 'login'
}
}
})
</script
</body
vue + element-ui 制作tab切换（切换vue组件，踩坑总结）
本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。1、vue如何使用element-ui
2、创建相应文件。
a、创建父组件 src/components/tabZujian.vue
b、创建自组件（被切换的组件）src/tabComponents 文件夹
+ + tabComponents（目录）
---- tabZujianChild1.vue
---- tabZujianChild2.vue
3、编写组件实现tab切换不同子组件
tabZujian.vue
<template
<div class="tabZujian"
<el-tabs v-model="activeName"
<el-tab-pane label="tab1" name="first" :key="'first'"
<child1</child1
</el-tab-pane
<el-tab-pane label="tab2" name="second" :key="'second'"
<child2</child2
</el-tab-pane
</el-tabs
</div
</template
<script
import tabZujianChild1 from '@/tabComponents/tabZujianChild1'
import tabZujianChild2 from '@/tabComponents/tabZujianChild2'
export default {
name: 'tabZujian',
components:{
child1:tabZujianChild1,
child2:tabZujianChild2
},
data() {
return { //默认第一个选项卡
activeName: "first",
}
}
}
</script
tabZujianChild1.vue
<template
<div class="child1" 我是第一个自组件 </div
</template
<script export default {
name: 'child1',
mounted(){
console.log("tab1组件")
}
} <
/script<
tabZujianChild2.vue
[template
<div class="child2" 我是第二个子组件 </div
</template
<script export default {
name: 'child1',
mounted(){
console.log("tab2组件")
}
} </script<
[
默认是tab1显示 切换到tab2显示也成功了
!* 但是不知道同学们是否注意到：
1、我在每个子组件的mounted生命周期钩子函数下分别打印了两个不同的文本
2、当路由到这个tab页面的时候，应该是没注意控制台是打印了当前显示的tab1组件中的console还是tab2组件的console
3、当你打开控制台的时候，你会很惊讶的发现。两个组件之中的console都被打印了。这说明，并不是我想象的，tab到1时候打印组件1；tab到2时候打印组件2
4、解决
这时候当你来回切换的时候，通过v-if判断是否重新渲染当前组件
更改一下tabZujian.vue
<template
<div class="tabZujian"
<el-tabs v-model="activeName" @tab-click="handleClick"
<el-tab-pane label="tab1" name="first" :key="'first'"
<child1 v-if="isChildUpdate1"</child1
</el-tab-pane
<el-tab-pane label="tab2" name="second" :key="'second'"
<child2 v-if="isChildUpdate2"</child2
</el-tab-pane
</el-tabs
</div
</template
<script
import tabZujianChild1 from '@/tabComponents/tabZujianChild1'
import tabZujianChild2 from '@/tabComponents/tabZujianChild2'
export default {
name: 'tabZujian',
components:{
child1:tabZujianChild1,
child2:tabZujianChild2
},
data() { return { //默认第一个选项卡
activeName: "first",
isChildUpdate1:true,
isChildUpdate2:false
}
},
methods:{
handleClick(tab) {
if(tab.name == "first") {
this.isChildUpdate1 = true;
this.isChildUpdate2 = false;
} else if(tab.name == "second") {
this.isChildUpdate1 = false;
this.isChildUpdate2 = true;
}
}
}
} </script
这回当你没吃切换tab的时候在注意v8的console
成功了 关于vue转换小程序组件和小程序使用vue组件的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 vue转换小程序组件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序使用vue组件、vue转换小程序组件的信息别忘了在本站进行查找喔。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~