vue----实现父组件向子组件传值

最新推荐文章于 2024-01-28 21:17:33 发布

HongfeiAn

最新推荐文章于 2024-01-28 21:17:33 发布

阅读量264

点赞数

分类专栏： Vue 文章标签： vue html js

本文链接：https://blog.csdn.net/qq_41601327/article/details/107044340

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

不整虚的，直接摆一个小案例
实现效果：父组件向子组件传值，并修改父组件的值

<!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>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 父组件可以在引用子组件的时候，通过属性绑定的方式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
        <com1 :parentmsg="msg"></com1>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '123父组件中的数据',
            },
            methods: {},
            components: {
                //结论：经过演示，发现，子组件，默认无法访问到父组件中的data上的数据和methods中的方法
                com1: {
                    data() { //注意：子组件中data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过Ajax，请求回来的数据，都可以放到data身上
                        //data上的数据，都是可读可写的
                        return {
                            title: '123',
                            content: 'qqq',
                        }
                    },
                    template: '<h1 @click="change">这是子组件---{{parentmsg}}</h1>',
                    //组件中的所有props中的数据，都是通过父组件传递给子组件的

                    //props中的数据，都是只读的，无法重新赋值
                    props: ['parentmsg'], //把父组件传递过来的parentmsg属性，现在props数组中，定义一下，这样才可以使用这个数据
                    methods: {
                        change() {
                            this.parentmsg = '被修改了';
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

HongfeiAn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue----实现父组件向子组件传值

不整虚的，直接摆一个小案例实现效果：父组件向子组件传值，并修改父组件的值<!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" con
复制链接

扫一扫