vue转换小程序组件(小程序使用vue组件)

网友投稿 782 2023-01-02

本篇文章给大家谈谈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小时内删除侵权内容。

上一篇:一个企业app开发价格(一个企业app开发价格多少)
下一篇:一网通办个税怎么申报(如何开通个税网上申报)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~