Vue入门 Demo14 父子组件之间的值传递

最新推荐文章于 2023-05-17 19:46:30 发布

城南花已开呀

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量91

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_36778310/article/details/104712470

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Vue入门 Demo14 父子组件之间的值传递

<!DOCTYPE html>
<html lang="en"> 
    <head> 
        <meta content="text/html; charset=utf-8" /> 
        <title>父子组件传值</title> 
        <script src="./vue.js"></script>
        
    </head> 
    <body>
        <!-- 父组件通过属性形式向子组件传值,子组件通过事件触发的形式向父组件传值 -->
        <div id="app">  
            <!-- 父组件可以监听子组件的事件 -->
            <counter :count="0" @change ="handlerChange"></counter>
            <counter :count="1" @change ="handlerChange"></counter>
            <div>{{total}}</div>
        </div>
        <script>

            //父组件向子组件传递值时,子组件用props接收值,且不可轻易去修改父组件传递过来给子组件的值
            var counter = {
                template: '<div @click="handleClick">{{number}}</div>',
                props: ['count'],
                data: function(){
                    return {
                        number: this.count,
                    }
                },
                //子组件向父组件传值时可以通过事件进行传值$emit
                methods: {
                    handleClick: function(){
                        this.number++,
                        this.$emit('change',1)
                    }
                }
            };
        
            var vm = new Vue({
                el: "#app",
                data: {
                    total: 1,   
                },
                components: {
                    counter: counter,
                },
                methods:{
                    handlerChange: function(step){
                         this.total  += step;   
                    }
                } 
            })
        </script> 
    </body> 
</html>

城南花已开呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门 Demo14 父子组件之间的值传递

Vue入门 Demo14 父子组件之间的值传递<!DOCTYPE html><html lang="en"> <head> <meta content="text/html; charset=utf-8" /> <title>父子组件传值</title> &l...
复制链接

扫一扫

专栏目录