vue 子组件调用父组件数据

最新推荐文章于 2023-08-12 09:49:22 发布

weixin_30846599

最新推荐文章于 2023-08-12 09:49:22 发布

阅读量1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zyb-722/p/10309158.html

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
       <div class="" id="myVue">
           <my-component>
           </my-component>
       </div>
       
       <template id="child" >
           <div id="">
               <div @click='changedata'>子组件：{{data}}</div>
           </div>
       </template>
       
       <template id="father">
           <div>
               <mycomponent-child v-bind:data="str"></mycomponent-child>
           </div>
       </template>
   </body>
   <script type="text/javascript" charset="utf-8">
       /*在父组件中的数据str，
       * 将父组件的数据绑定到子组件的属性data上
       * 然后在子组件中就可以通过props接收到，
       * 这样在子组件中就可以使用变量 this.data1访问到父组件的 str1对应的值了。
       */
       //当点击子组件，触发子组件的changedata方法，通过this.data = "父组件值被子组件修改了";改变了父级的str的值
       //通过 this.$parent.fn()访问父组件的方法fn()。
       var child={
           props:["data"],
           template:"#child",
           data:function(){
               return{
                   str:"我是子组件数据"
               }
           },
           methods:{
                changedata:function(){
                    this.data = "父组件值被子组件修改了";
                    this.$parent.fn();
                }
           }
       }

       /*父组件*/
       var father={
           template:"#father",
           data:function(){
               return{
                   str:"我是父组件数据"
               }
           },
           methods:{
               fn:function(){
                   alert("我是父组件方法")
               }
           },
           components:{
               "mycomponentChild":child
           }
       }

       vm=new Vue({
           //el:"#myVue",
           components:{
               "myComponent":father
           }
       }).$mount('#myVue');

   </script>
</html>

转载于:https://www.cnblogs.com/zyb-722/p/10309158.html

weixin_30846599

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 子组件调用父组件数据

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8">&...
复制链接

扫一扫