美文网首页
Vue子组件如何调用父组件的data和方法

Vue子组件如何调用父组件的data和方法

作者: ___大鱼___ | 来源:发表于2018-11-08 17:42 被阅读16次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
    
    
    
    <com1 :parent="msg" @func1="show"></com1>
    
        </div>
    
    
      <template id="children">
          <div>
               <input type="button" value="点击我触发父元素世间" @click="myclick">
            我是你的孩子啊 -- {{parent}}   <!--获取绑定的parent的值  就是父元素msg 的值-->
    
    
          </div>
        </template>
    
    
        <script>
    
            var app = new Vue({
                el: '#app',
                data:{
                    msg: '看世间荣华富贵'
                },
                methods: {
                    show(){
                        console.log('你调用了我的方法')
                    }
                },
                // 定义私有子组件
                components:{
                    com1: {
                        template: '#children',
                         methods: {
                             myclick(){
                                    this.$emit('func1')
                                }
                        },
                        props:['parent'], // 将com1绑定的parent的值传递给子组件,
                        data: function () {
                            return {
                                mag1231: 12313
                            }
                        }
                    },
    
    
    
                },
                created: function () {
    
                },
                mounted: function () {
    
                }
            })
    
        </script>
    </body>
    </html>
    
    
    

    相关文章

      网友评论

          本文标题:Vue子组件如何调用父组件的data和方法

          本文链接:https://www.haomeiwen.com/subject/utawxqtx.html