VUE-Day03组件间传递数据

父子间:

1.父->子

为什么:Vue中父组件的数据模型是专属的,子组件默认不能使用父组件的数据。

解决:两步

         (1)子组件

          var 子组件={

                template:"xxx",

                props:["变量",...]  //声明一个内外两用的变量

                            //对外:父元素可为其绑定数据

                            //对内:相当于 data:{ 变量 }    

                 }

                <template id="tplXXX">

                       {{变量}}    <ANY:属性="变量">  

                </template>

          (2)父组件:

          <template id="tql 父组件">   

                 <子组件 :变量="模型变量"></子组件>

                 父组件将自己的模型变量的值传递给子组件的变量属性,子组件就获得了父组件的数据

2.子->父

           (1)第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

           (2)第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

           (3)第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法

            https://www.cnblogs.com/jin-zhe/p/9523782.html 

 

posted @ 2020-03-29 01:19  AZUKI七  阅读(104)  评论(0编辑  收藏  举报