Vue组件之间传递参数

最近在学习VUE，在组件这块遇到了一些问题，记录下来，以便以后查看

              1、父组件传递数据给子组件

<div id="box">    <div>         父容器:<input type="text" v-model="txt" /><br> <my-comp :ttt="txt"></my-comp>    </div></div>

                               

var mv=new Vue({el:"#box",data:{txt:"hello world"},components:{myComp:{template:`<div>子组件:<input type="text" v-model="ttt"></div>`,props:['ttt']}}})

                 2、父组件传递数据给子组件（出于安全考虑，vue只允许单向数据流）

                     子组件将父组件传入的值作为局部变量使用（父组件给子组件传递的数据是单向绑定的）

props: ['ttt'],data: function () {  return { mytxt:this.ttt }}

                      
                            子组件将父组件传入的值处理后再使用（此时可以使用计算属性）

props: ['ttt'],computed: {  mytxt: function () {    return this.ttt+"...";  }}

                            使用自定义事件将子组件向父组件传递同时也可以用于任何两个组件之间的数据交互

                                    $on(eventName)  ==>监听事件  $emit(eventName) ==> 触发事件

                                    

<div id="box"><div>父容器:<input type="text" v-model="txt" /><br><my-comp :ttt="txt"></my-comp></div></div>

var vue=new Vue();  //声明一个空的实例对象用于挂载事件var mv=new Vue({el:"#box",data:{txt:"hello world"},components:{myComp:{template:`<div>子组件:<input type="text" @input="ontxt1" v-model="ttt"></div>`,props:['ttt'],methods:{ontxt1:function(){console.log("子组件更新了！");vue.$emit('ontxt',this.ttt);}}}},created(){vue.$on("ontxt",function(val){console.log("父组件更新了！");this.txt=val;}.bind(this))}})