vue零基础开发016——父子组件的数据传递

作者: 文朝明 | 来源:发表于2019-11-28 12:46 被阅读0次

vue零基础开发016——父子组件的数据传递
#搭建Vue+TypeScript项目(五)
vue学习
Vue的组件通信
到了Vue2.x有哪些变化？—— 组件通信
vue中组件的通信方式
Vue如何实现组件通信？
vue组件如何通信？有几种方式？
Vue中组件间传值总结 ------ 2020-05-17
vue 事件总线EventBus的概念、使用以及注意点

父组件通过属性向子组件传值，子组件通过事件触发向父组件传值；单项数据流：父组件可以向子组件传递任何数据，子组件不能改变父组件传递过来的数据，可以通过拷贝副本来实现修改

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>父子组件传值</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!---加冒号是数字，不加则是字符串--->
        <counter :count="3" @inc="handleIncrease"></counter>
        <counter :count="2" @inc="handleIncrease"></counter>
        <div>{{total}}</div>
    </div>
    <script>
        var counter = {
            props: ['count'],
            data: function () {
                return {
                    number:this.count
                }
            },
             //template: '<div  @click="handleClick">{{count}}</div>',
            template: '<div  @click="handleClick">{{number}}</div>',
            methods: {
                handleClick: function () {
                    //子组件不能随意改变父组件的数据
                   // this.count++
                   // this.number++
                    this.number=this.number+1
                    this.$emit('inc',1)//
                }
            }

        }
        var vm = new Vue({
            el: '#root',
            data: {
                total:5
            },
            components: {
                counter: counter
            },
            methods: {
                handleIncrease: function (step) {
                    console.log(step)
                    this.total+=step
                }
            }
        })
    </script>
</body>
</html>