vue数据传递--父传子-方法传递

vue数据传递二

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>父传子,方法传递</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script src="vue/vue.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <!-- 父组件向子组件传递方法
            1、在父组件中创建方法或绑定函数
                 <button v-on:click='dianji'>我是父组件</button>
            2、在子组件标签中<子组件标签 v-on:自定义接收名= '父组件方法名'> 
                 <son v-on:parentdianji(自定义接收名) = 'dianji(父组件方法名)'></son>  
            3、在子组件模板中,创建绑定事件或其他,通过在函数中this.$emit('自定义接收名'),接收父组件方法 
                 <button v-on:click='sonDianji'>我是子组件</button>  
                 sonDianji:function(){
                        this.$emit('parentdianji')
                    }    


         -->
        <div id="app">
            <button v-on:click='dianji'>我是父组件</button>
            <son v-on:parentdianji = 'dianji'></son>

        </div>
        <template id="son">
            <button v-on:click='sonDianji'>我是子组件</button>
        </template>
        
        <script>
            var son = {
                data:function(){
                    return{

                    };
                },
                methods:{
                    sonDianji:function(){
                        this.$emit('parentdianji')
                    }
                    
                },
                template:'#son',
            };
            var app = new Vue({
                el:'#app',
                data:{},
                methods:{
                    dianji:function(){
                        alert('你好啊我是父组件')
                    }

                },
                computed:{

                },
                watch:{

                },
                components:{
                    'son':son,
                }
            })
        </script>
    </body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值