Vue父子组件传值

最新推荐文章于 2024-08-02 09:29:40 发布

凌辰 ℡

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量92

点赞数

分类专栏： vus.js 文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/weixin_43117777/article/details/120660981

版权

vus.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

父组件向子组件传值

父组件向子组件传递普通数据

把要传递给子组件的数据，作为自定义属性，通过 v-bind: 绑定到子组件身上：

<com1 :msg123="parentMsg"></com1>

在子组件中，不能直接使用父组件传递过来的数据，需要先使用 props 数组来接收一下：

props: ['msg123']

注意：在接收父组件传递过来的 props的时候，接收的名称，一定要和父组件传递过来的自定义属性，名称保持一致！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 父组件如果想要给子组件传递数据，则需要使用属性绑定的形式 -->
        <!-- 这样，子组件身上的 自定义数据，就是你要传递给子组件的数据 -->
        <com1 :msg="parentMsg"></com1>    
    </div>
    <script>
      var vm =  new Vue({
            el:"#app",
            data:{
               parentMsg:'哈哈，你是想笑死我，然后继承我的花呗吗？'
            },
            methods:{},
            components:{    // 定义私有组件
                'com1':{    // 在 Vue 中，默认，子组件无法直接获取父组件中的数据
                    template:`
                        <div>
                            <h3>这是子组件中的标题：{{msg}}</h3>    
                        </div>
                    `,
                    props:["msg"]   // 在Vue中,只有props是数组，其他带 s 后缀的属性都是 对象
                }
            }
        })
    </script>
</body>
</html>

父组件向子组件传递方法

把要传递给子组件的方法，作为自定义事件，通过 v-on: 绑定到子组件身上：

<com1 @func="show"></com1>

2.在子组件中，不能直接使用父组件传递过来的方法，需要先使用 $emit来触发自定义事件：

this.$emit("func",this.sonMsg);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <style>
       
    </style>
</head>
<body>
    <div id="app">
        <!-- 1.如果要向子组件传递 data 中的数据，则 使用 属性绑定的形式 v-bind -->
        <!-- 2.如果要向子组件传递 methods 中的 方法，则 使用 事件绑定的形式 v-on: -->
        <com1 @func="show"></com1>
       <p> msgFormSon: {{msgFormSon}}</p>
    </div>
    <script>
      var vm =  new Vue({
            el:"#app",
            data:{
               msgFormSon:''
            },
            methods:{
                show(arg1){
                   // console.log('有人调用了父组件中的show方法---'+arg1);
                   // 把子组件中传递过来的数据，保存到 父组件的 data 中
                   this.msgFormSon = arg1;
                }
            },
            components:{    // 定义子组件
                'com1':{
                    template:`
                        <div>
                            <!-- 当点击子组件的 按钮时候，调用一下 父组件传递过来的 func 方法 -->
                            <input @click="btnClick" type="button" value="这是子组件的按钮">    
                        </div>
                    `,
                    data(){
                     return {sonMsg:"这是子组件中的数据"}   
                    },
                    methods:{
                        btnClick(){
                            // console.log('ok');
                            // 调用一下 父组件传递过来的 func 方法 emit 英文原意为 发射，在计算机中，引申为 触发
                           
                            // 子组件向父组件传值，本质上，还是调用了父组件传递过来的方法，只不过，子组件在调用的时候，
                            // 把 数据 当做参数，传给这个方法了
                            this.$emit("func",this.sonMsg);
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>