js 实现vue—引入子组件props传参

最新推荐文章于 2024-07-17 14:23:15 发布
最新推荐文章于 2024-07-17 14:23:15 发布
阅读量227 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/linjiangxian/p/11464828.html
版权

参考：https://www.cnblogs.com/xiaohuochai/p/7388866.html

效果：

 

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>js实现vue—引入子组件props传参</title>
        <link rel="stylesheet" href="css/1.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
        <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
        <script src="js/1.js"></script>
    </head>
    <body>
        <div id="app">
            <keep-alive>
                <router-view class="child-view" v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>

            <router-view class="child-view" v-if="!$route.meta.keepAlive"></router-view>
        </div>
        <script type="text/x-template" id="page1">
            <div>
                <TopNav :show-btn="ifShow"></TopNav>,
                <!-- 对于props声明的属性来说，在父级HTML模板中，属性名需要使用中划线写法 -->
                <p class="content">页面1</p>
                <router-link to="/page2" tag="span" class="btnRouter">页面2</router-link>
                <BlankPage id="BlankPage1"></BlankPage> 
                <!-- 多个组件引入同一组件改变显示/隐藏状态时，需绑定指定id，否则多个组件会混乱 -->         
            </div>
        </script>

        <script type="text/x-template" id="page2">
            <div>
                <TopNav :show-btn="ifShow"></TopNav>
                <p class="content">页面2</p>
                <BlankPage id="BlankPage2"></BlankPage>
            </div>
        </script>
    </body>
</html>

1.js:

$(document).ready(function() {
    Vue.prototype.$show = function(obj) { //全局函数1
        var o = $(obj);
        o.css('display', 'block');
    };
    Vue.prototype.$hide = function(obj) { //全局函数2
        var o = $(obj);
        o.css('display', 'none');
    };

    Vue.use(VueRouter);

    // 顶部组件  start
    var TopNav = Vue.extend({
        data() {
            return {
                showBtn: false
            }
        },
        props: ['showBtn'],
        watch: {
            showBtn: function(newVal, oldVal) {
                this.showBtn = newVal;
            }
        },
        template: "<p class='title'> " +
            "<span>顶部组件</span>" +
            "<span v-show='showBtn' class='btnBack' @click='$router.back(-1)'>返回</span>" +
            "</p>"
    })
    /* 子级props属性声明时，使用小驼峰或者中划线写法都可以；
       而子级模板使用从父级传来的变量时，需要使用对应的小驼峰写法
    */

    // 顶部组件  end

    // 正在加载组件  start
    var BlankPage = Vue.extend({
        template: "<div class='BlankPage'>" +
            "<div class='loadingDiv'>" +
            "<p class='loadingIcon'>" +
            "<img src='img/load.gif' alt=''>" +
            "</p>" +
            "<p class='loadingTxt'>正在加载...</p>" +
            "</div>" +
            "</div>"
    })
    // 正在加载组件  end

    // 页面1  start
    var Page1 = Vue.extend({
        data() {
            return {
                ifShow: false
            }
        },
        template: "#page1",
        // 局部注册子组件
        components: {
            TopNav,
            BlankPage
        }
    })
    //页面1  end

    //页面2  start
    var Page2 = Vue.extend({
        data() {
            return {
                ifShow: true
            }
        },
        template: "#page2",
        components: {
            TopNav,
            BlankPage
        }
    })
    //页面2  end

    var router = new VueRouter({
        routes: [{
                path: '/',
                name: 'Page1',
                meta: {
                    index: 0,
                    keepAlive: true,
                    title: '页面1'
                },
                component: Page1
            },
            {
                path: '/page2',
                name: 'Page2',
                meta: {
                    index: 1,
                    keepAlive: false,
                    title: '页面2'
                },
                component: Page2
            }
        ]
    })

    router.beforeEach((to, from, next) => {
        var toDepth = to.meta.index;
        var fromDepth = from.meta.index;

        if (to.meta.title) {
            document.title = to.meta.title;
        }

        if (toDepth == 'undefined' || toDepth == undefined) {
            if (true) {
                //这个可以关闭安卓系统的手机
                document.addEventListener('WeixinJSBridgeReady', function() {
                    WeixinJSBridge.call('closeWindow');
                }, false);
                //这个可以关闭ios系统的手机
                WeixinJSBridge.call('closeWindow');
                // wx.closeWindow();
            }
            return;
        } else if (toDepth < fromDepth) { //返回
            from.meta.keepAlive = false;
            to.meta.keepAlive = true;
        }
        next()
    })

    var app = new Vue({
        el: '#app',
        router
    }).$mount('#app')
})

1.css:

@CHARSET "UTF-8";

body {
    width: 100%;
    height: 100%;
}

body,
div,
p {
    margin: 0;
    padding: 0;
    text-align: center;
}

.content {
    margin-top: 200px;
}

.title {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    padding-left: 50px;
    line-height: .60px;
    display: flex;
    align-items: center;
    color: #fff;
    background-color: lightseagreen;
    z-index: 1;
}

.btnBack {
    margin-left: 50%;
}

.btnRouter {
    width: 100px;
    height: 30px;
    line-height: 30px;
    margin-top: 20px;
    display: inline-block;
    background-color: lightseagreen;
    color: #fff;
    border-radius: 10px;
}

.NoMore {
    font-size: 14px;
    color: #888;
    margin-top: 30px;
    text-align: center
}

#NoMore1,
#NoMore2 {
    display: none;
}

.NoMoreTxt:before {
    content: "";
    width: 100px;
    height: 1px;
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 1px;
    background-color: #dadada;
}

.NoMoreTxt:after {
    content: "";
    width: 100px;
    height: 1px;
    display: inline-block;
    background-color: #dadada;
    margin-bottom: 5px;
    margin-left: 10px;
}

#BlankPage1,
#BlankPage2 {
    display: none;
}

.BlankPage {
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: #fff;
    background-color: #fff;
    -webkit-transition: all .2s ease-out;
    transition: all .5s ease-out;
    transition: all .5s ease-out;
    transition: all .5s ease-out;
    position: fixed;
    top: 0;
    z-index: 12;
}

.loadingDiv {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 50px;
}

.loadingTxt {
    font-size: 14px;
    color: #666;
    text-align: center;
}

.loadingIcon {
    text-align: center;
}

.loadingIcon img {
    display: inline-block;
    width: 40%;
    height: 48px;
}

 

转载于:https://www.cnblogs.com/linjiangxian/p/11464828.html

Macdull2014
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
子组件向父组件传参的几种方法
随笔记录，有些许菜，莫怪莫怪
07-19 9291
子组件向父组件传参的几种方法
vue 中 props 组件传参
cmchenmei的博客
11-23 2559
注意一：组件传参的时候不能使用驼峰式命名规则 原因：html对大小写不敏感，浏览器会将所有的大写解释为小写 使用：在你使用模板的时候，如果模板中的prop中是以驼峰形式命名的，那么在传参的时候要以短线分隔，eg： Vue.componet('myInpt',{ porps:['errMess'], template:`&lt;div&gt;{{errMess}}&lt;/div&g...
js动态插入vue组件
weixin_43355265的博客
05-18 2460
js动态插入vue组件 组件： <template> <div> {{title}} </div> </template> <script> export default { data () { return { } }, mounted () { }, beforeDestroy () {
Vue.js中props的使用
种麦南山下的博客
10-12 5563
父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。
vue传参给子组件 子组件传参给父级
最新发布
qq_27806371的博客
07-17 82
vue父传子 子传父
vue 子组件与子组件之间传参
warrah 南极狼
12-22 4198
封装可以让整体程序看起来很优雅，但有些问题需要解决，当然这些问题解决之后，开发效率自然就上去了，我的目标就是高效，然后能准点下班。靠时间换取金钱，意义不大。 子组件与子组件之间是不能直接传值的，需要凭借父组件，这个也非常容易理解。 1 子组件向父组件传参 查询条件子组件，显示格局条件，如果超过8个，则显示下拉菜单， 子组件通过this.$emit("addCond",item)传参，即子组件可以使用 $emit 触发父组件的自定义事件 <template> <div>
Vue 组件传参的几种方式
W Y L
03-08 2715
一、props 传参 子组件定义 props 有三种方式: / 第一种数组方式 props: [xxx, xxx, xxx] // 第二种对象方式 props: { xxx: Number, xxx: String} // 第三种对象嵌套对象方式 props: { xxx: { //类型不匹配会警告 type: Number, default...
vue父组件向子组件传参，子组件通过props接收传递过来的参数
qq_39695210的博客
01-29 476
vue父组件向子组件传参，父组件直接绑定在子组件的标签上，子组件通过props接收传递过来的参数。
vue9种跨组件传参-props、$emit、$refs、$EventBus、消息订阅与发布...
TKY666的博客
08-29 3190
通过 props 传递 通过 $emit 触发自定义事件 使用 ref EventBus $parent 或$root attrs 与 listeners Provide 与 Inject Vuex
vue父子组件传参的几种方式
秋来九月八
01-05 2万+
如果你的父子组件之间在不同的路由中，你可以使用路由参数来传递数据。在父组件中触发事件，而子组件监听事件以接收数据。你可以在父组件中使用 $emit 发送自定义事件，然后在子组件中监听该事件来传递数据。子组件接收一个父组件传递过来的方法，将要传递给父组件的参数作为该方法的参数使用。父组件直接绑定在子组件的标签上，子组件通过props接收传递过来的参数。在父组件和子组件中都可以访问和修改 Vuex 存储的数据。在发送事件的组件中使用 $emit 来触发事件。在接收事件的组件中使用 $on 来监听事件。
JS实现父组件调用子组件内函数
孜然卷的博客
12-14 774
一般比较多的是子组件调用到父组件。父组件调用子组件用的比较少。
Vue.js 组件通信一 父组件向子组件传值——通过props
ScottePerk的博客
09-21 4415
Prop 是你可以在组件上注册的一些自定义 attribute。这是官方给出的定义。简单点说，就是父组件给子组件传值的时候，把值直接传给子组件自己定义的属性。这些属性（property）是在子组件里面定义的，没错，prop就是property的缩写。相当于给父组件带名字的盒子，叫父组件往里面放数据就行。还是举个例子说明更清楚。我们定义一个子组件的模板，因为子组件是提供给父组件（通常就是顶层组件）用的。所以子组件定义的变量不能写死，而是需要父组件传入。
vue.js：父组件向子组件传递数据props
零小唬的博客
12-08 135
vue.js：父组件向子组件传递数据props
【vue】父向子组件传参、子组件向父传参、vue中父组件调用子组件函数、子组件向父组件调用方法
weixin_42401291的博客
05-25 1759
1.父向子组件传参 App.vue为父，引入componetA组件之后，则可以在App.vue中使用标签（注意驼峰写法要改成componet-a写法，因为html对大小写不敏感，componenta与componentA对于它来说是一样的，不好区分，所以使用小写-小写这种写法）。 而子组件componetA中，声明props参数’msgfromfa’之后，就可以收到父向子组件传的参数了。例子中...
子组件引入的js文件的两个问题
longtengg1的博客
10-19 457
子组件中通过import引入的js文件，会在创建子组件的vue实例前就会被执行，所以会先于父组件中的钩子先执行。 另： 在两个组件中都引入了同一个js文件，此js文件中都做了打印；那么最终只会打印一次。 ...
Vue.js 组件间值传递(props)
LT19990304的博客
10-09 488
简单接收 子组件配置 <template> <div class="item"> <h2>{{title}}</h2> <p>{{content}}</p> <hr> <span>{{aouthor}}</span> <span>{{views}}</span> <span>{{msg}}</s...
vue通过引入js标签的方式在HTML上的组件写法，父子组件数据传递
热门推荐
xlzy
02-01 2万+
html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> title>Titletitle> link rel="styleshee
js引入vue
qq_46126672的博客
01-28 1944
使用JavaScript引入vue的方法
vue3 父组件调用vue2子组件并且传参
07-30
在Vue3中，父组件调用Vue2子组件并传递参数的方法与Vue2中相同。你可以使用props属性将数据从父组件传递给子组件。首先，在父组件中引入子组件，并在父组件的template中使用子组件，并通过props属性传递参数。例如： ```javascript // 父组件 <template> <div> <component-a :msgfromfa="(Just Say U Love Me)" v-on:child-say="listenToMyBoy"></component-a> </div> </template> <script> import componentA from './components/componentA' export default { components: { componentA }, data() { return { childWords: "" } }, methods: { listenToMyBoy(msg) { this.childWords = msg } } } </script> ``` 在子组件componentA中，你可以通过props属性接收父组件传递的参数。例如： ```javascript // 子组件componentA <template> <div> <button @click="handleClick">Click me</button> </div> </template> <script> export default { props: \['msgfromfa'\], methods: { handleClick() { this.$emit('child-say', this.msgfromfa) } } } </script> ``` 这样，当在子组件componentA中点击按钮时，会触发"child-say"事件，并将父组件传递的参数msgfromfa传递给父组件的listenToMyBoy方法，然后将msg赋值给childWords，最后在父组件的template中显示childWords的值。 #### 引用[.reference_title] - *1* *2* *3* [【vue】父向子组件传参、子组件向父传参、vue中父组件调用子组件函数、子组件向父组件调用方法](https://blog.csdn.net/weixin_42401291/article/details/90549791)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值