vue组件之间的传值

最新推荐文章于 2024-07-23 14:29:05 发布

禅悟刂

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量221

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42575310/article/details/106637469

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

父组件向子组件传值通过props接受

vue使用中，经常会用到组件，好处是：

1、如果有一个功能很多地方都会用到，写成一个组件就不用重复写这个功能了；
2、页面内容会简洁一些；方便管控；

props可以对象的形式接受

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <com :msg='msg'></com>
    </div>
    <template id="tem">
        <div>
            <span>当前数量位：{{count}}</span><br>
            {{msg}}
        </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
      
        let com = Vue.extend({
            template: '#tem',
            data () {
                return{
                    count: 0
                }
            },
            // props: [
            //     'msg'
            // ]
            props: {
                msg: {
                    type: String,
                    default: '我是默认值父组件没有给我数值！！！'
                }
            }
        });
        var vm = new Vue({
            el: '#app',
            data:{
                msg: '我是父组件数据'
            },
            methods:{

            },
            components:{
                'com':com
            }
        })
    </script>
</body>
</html>

props中type支持的类型有：String、Number、Boolean、Array、Object、Date、Function、Symbol

子组件传递数据或者事件到父组件中用$emit来实现

可以使用自定义事件来完成；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <com :msg='msg' @ale='alertMsg'></com>
    </div>
    <template id="tem">
        <div>
            <span>当前数量位：{{count}}</span><br>
            {{msg}}
            <button @click="client">点我有惊喜</button>
        </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
      
        let com = Vue.extend({
            template: '#tem',
            data () {
                return{
                    count: 0
                }
            },
            // props: [
            //     'msg'
            // ]
            props: {
                msg: {
                    type: String,
                    default: '我是默认值父组件没有给我数值！！！'
                }
            },
            methods: {
                client () {
                    this.$emit('ale','count');
                }
            }
        });
        var vm = new Vue({
            el: '#app',
            data:{
                msg: '我是父组件数据'
            },
            methods:{
                alertMsg (msg) {
                    alert('我被调用了！！！'+msg);
                }
            },
            components:{
                'com':com
            }
        })
    </script>
</body>
</html>

父组件调用子组件方法用$ref来调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="saveAdd">加一</button>
        <com ref='add'></com>
    </div>
    <template id="tem">
        <div>
            {{count}}
        </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
      
        let com = Vue.extend({
            template: '#tem',
            data () {
                return{
                    count: 1
                }
            },
            methods:{
                addCount () {
                    this.count++;
                }
            }
          
        });
        var vm = new Vue({
            el: '#app',
            methods:{
                saveAdd () {
                    console.log(this.$refs.add.count);
                    this.$refs.add.addCount()
                }
            },
            components:{
                'com':com
            }
        })
    </script>
</body>
</html>

禅悟刂

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue组件之间的传值

父组件向子组件传值通过props接受vue使用中，经常会用到组件，好处是：1、如果有一个功能很多地方都会用到，写成一个组件就不用重复写这个功能了；2、页面内容会简洁一些；方便管控；props可以对象的形式接受<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device
复制链接

扫一扫