vue子传父

作者: coffee1949 | 来源:发表于2019-06-02 14:46 被阅读0次

Vue父子组件传值
vue 组件之间传值父传子子传父 todolist
vue2.0专题：通信
VUE组件（传值，生命周期）
vue的父子传值和使用vuex兄弟传值
Vue - 传值
Vue2.0实操经典文章整理
vue 组件传值之 $attrs、$listeners
Vue 父组件向子组件传值
vue2.0的三种常用传值方式，并且如何实现？

$emit向上提交事件
使用$emit调用父组件的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="vue.js"></script>

</head>
<body>
    <div id="app">
        <!-- 第二步，父组件把数据传递给子组件 -->
        <hdcms :lists='goods' @total='totalPrice'></hdcms>
        总价：{{total}}
    </div>

    <script type="text/x-template" id="hdcms">
        <table>
            <tr>
                <th>商品名</th>
                <th>价格</th>
                <th>数量</th>
            </tr>
            <!-- 第四步，子组件渲染数据 -->
            <tr v-for="(v,k) in lists">
                <td>{{v.name}}</td>
                <td>{{v.price}}</td>
                <td><input type="number" v-model='v.num' @input='reloadTotal'></td>
                <!-- 第五步监听数据变化 -->
            </tr>

        </table>

    </script>
    <script type="text/javascript">
        var hdcms = {
            template: '#hdcms',
            // 第三步，子组件接收数据
            props: ['lists'],
            data(){
                return{

                }
            },
            methods: {
                reloadTotal(){
                    // 第六步调用父组件方法重新计算总价
                    this.$emit('total')
                }
            }
        }


        var app = new Vue({
            data: {
                total: 0,
                // 第一步，父组件的数据
                goods: [
                    {
                        name: '苹果X',
                        price: 1000,
                        num: 6
                    },
                    {
                        name: '西瓜',
                        price: 100,
                        num: 3
                    }
                ]
            },
            methods: {
                totalPrice(){
                    this.total = 0;
                    this.goods.forEach((v)=>{
                        this.total += v.num * v.price;
                    })
                }
            },
            // 生命周期函数钩子，是一个函数哦哦哦~
            mounted(){
                this.totalPrice();
            },
            components: {
                hdcms
            }
        }).$mount('#app')



    </script>
</body>
</html>