《Vue学习笔记》-组件-父子组件传值的方式及相关细节

最新推荐文章于 2024-07-09 16:50:01 发布

原创最新推荐文章于 2024-07-09 16:50:01 发布 · 257 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

Vue 专栏收录该内容

4 篇文章

订阅专栏

《Vue学习笔记》-组件-父子组件传值的方式及相关细节

1.父组件向子组件传值的方式

2.组件-父组件把方法传递给子组件-1

3.组件-父组件把方法传递给子组件-2（增加子组件向父组件传值）

《Vue学习笔记》-组件-父子组件传值的方式及相关细节

1.父组件向子组件传值的方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>


    <div id="app">
        <!--父组件，可以在引用子组件的时候，通过 属性绑定（v-bind）的形式，把 需要传递给 子组件的数据，
        以属性绑定的形式，传递到子组件内部，供子组件使用-->
        <!-- 注意：绑定的关键字（如：parentMsg）采用驼峰命名，在子组件内部使用关键字时，必须采用小写 -->
        <com1 v-bind:parentmsg="msg"></com1>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件中的数据'
            },
            methods: {},
            components: {
                //结论：经过尝试，发现，子组件中，默认无法访问到 父组件中的 data上的数据 和 methods中的方法
                com1: {
                    data() {
                        /*
                        注意：1.子组件中的data数据，并不是通过 父组件 传递过来的，而是子组件自身私有的，
                              比如：子组件通过Ajax,请求回来的数据，都可以放在data身上
                              --data上的数据都是 可读 可写的
                              2.组件中 所有 props 中的数据都是通过 父组件 进行传递的，不属于自己的，只是需要用到外部数据，进行验证
                              --props的数据只可以读，不可以写（如果写，会警告）
                        */
                        return {
                            title: 'title',
                            content: 'content'
                        }
                    },
                    template: '<h1>子组件中的数据--{{parentmsg}}</h1>',
                    //把父组件传递过来的parentMsg属性，先在props数组中，定义一下（可以认为，经过 子组件内部 认证后）,这样，才能使用这个数据
                    //注意： 组件中 所有的 props 中的数据，都是通过 父组件 传递给 子组件 的
                    //注意：如果 绑定关键字 采用 驼峰命名法，需要在子组件中全部采用小写，否则容易出错，其他直接复制 绑定的关键字 即可
                    props: ['parentmsg']
                }
            }
        })
    </script>


</body>

</html>

2.组件-父组件把方法传递给子组件-1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <!-- 
            父组件向子组件 传递 方法，使用的是 事件绑定机制，v-on;
            当我们自定义了一个事件属性之后，那么，子组件 就能够通过某些方式，来调用传递进去的 这个方法了   
        -->
        <!--注意：func 这个名称自己写就OK，只要 show 符合就行,但是不从这里 传参 ，从子组件的 $emit 方法进行 传参-->
        <com1 @func="show"></com1>
    </div>

    <template id='temp1'>
    <div>
        <h1>这是 子组件</h1>
        <input type="button" value="点击按钮，触发子组件调用父组件方法-func" @click="myclick">
    </div>
</template>
    <script>
        //定义一个字面量类型的 组件模板对象
        var com1 = {
            template: '#temp1',
            methods: {
                myclick() {
                    console.log('触发子组件myclick方法')
                        //当点击子组件的按钮时候，通过 $emit方法 拿到并调用 父组件 传递过来的 func 方法，并调用这个方法
                        //在 $emit 进行传参
                    this.$emit('func', 123, 123) //emit 意为：触发，调用，发射的意思

                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                //show 方法 还可以传参show(data1,data2...)
                show(data1, data2) {
                    console.log('调用父组件的 show 方法' + data1 + data2)
                }
            },
            components: {
                com1 //该写法，相当于 com2: com2
            }
        })
    </script>


</body>

</html>

3.组件-父组件把方法传递给子组件-2（增加子组件向父组件传值）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <!-- 
            父组件向子组件 传递 方法，使用的是 事件绑定机制，v-on;
            当我们自定义了一个事件属性之后，那么，子组件 就能够通过某些方式，来调用传递进去的 这个方法了   
        -->
        <!--注意：func 这个名称自己写就OK，只要 show 符合就行,但是不从这里 传参 ，从子组件的 $emit 方法进行 传参-->
        <com1 @func="show"></com1>
    </div>

    <template id='temp1'>
    <div>
        <h1>这是 子组件</h1>
        <input type="button" value="点击按钮，触发子组件调用父组件方法-func" @click="myclick">
    </div>
</template>
    <script>
        //定义一个字面量类型的 组件模板对象
        var com1 = {
            template: '#temp1',
            //新：定义数据对象
            data() {
                return {
                    sondata: {
                        name: '大头儿子',
                        age: 6
                    }
                }
            },
            methods: {
                myclick() {
                    console.log('触发子组件myclick方法')
                        //当点击子组件的按钮时候，通过 $emit方法 拿到并调用 父组件 传递过来的 func 方法，并调用这个方法
                        //在 $emit 进行传参，注意是this.sondata,因为是使用自己的数据，this. 表明当前对象
                    this.$emit('func', this.sondata) //emit 意为：触发，调用，发射的意思

                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {
                dataFromSon: null

            },
            methods: {
                //show 方法 还可以传参show(data1,data2...)
                // show(data1, data2) {
                //   console.log('调用父组件的 show 方法' + data1 + data2)}
                show(data) {
                    //console.log('调用父组件的 show 方法（尝试向父组件data对象）+' + data)
                    console.log(data)
                        //子组件向父组件传值,在该方法被调用的时候，同时将数据写入父组件的数据中
                    this.dataFromSon = data
                }
            },
            components: {
                com1 //该写法，相当于 com2: com2
            }
        })
    </script>


</body>

</html>