Vue 12-父子组件间数据传递

最新推荐文章于 2023-03-22 12:38:12 发布

Sukie_

最新推荐文章于 2023-03-22 12:38:12 发布

阅读量185

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Lin16819/article/details/100978374

版权

Vue 专栏收录该内容

18 篇文章 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>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <p>每次点击加2</p>
        <!-- 父组件向子组件传值要通过属性的形式，如:count='0' -->
        <!-- count='0'表示字符串，而:count='0'表示js表达式所以是数字 -->
        <counter :count='0' @change='handleChange'></counter>
        <counter :count='0' @change='handleChange'></counter>
        <div>{{total}}</div>
    </div>
    <script>
        // 局部组件
        var counter = {
            props: ['count'],
            data: function(){
                return {
                    number: this.count
                }
            },
            template: '<div @click="handleClick">{{number}}</div>',
            methods:{
                handleClick: function(){
                    //每次点击都会增加2
                    this.number = this.number +2;
                    // 子组件向父组件传值应通过事件的形式，下面是传2
                    this.$emit('change', 2);
                }
            }
        }

        // 父组件是Vue的根实例
        var vm = new Vue({
            el: '#root',
            data:{
                total:0
            },
            components:{
                counter: counter
            },
            methods:{
                handleChange: function(stepnum){
                    this.total += stepnum;
                }
            }
        })
        // Vue'单向数据流'：父组件可通过属性向子组件传递参数，但子组件不能直接改变父组件传来的数据，那儿子要用这数据咋办呢？
        // 此时子组件可在自身data中定义参数接收父组件传来的数据(等于复制一份数据)，再修改自己所定义的这个参数
        // 如上面儿子自定义number去接收父传的count，后面要改就改number
    </script>
</body>
</html>