在子组件中（组件声明时）：
Vue.component('bruip-info',{ template:` 组件的HTML代码 `, data(){ return{ } }, props:[], computed:{ } });而里面的props里面就是期望父组件传给子组件本身的参数，它有两种表示方法
1.形式参数，期望父组件传递给子组件的参数 props:['visible','title', 'likes'], 2.声明参数时顺便声明参数类型 props:{ visible:Boolean, title:String, likes: Number }在父组件中（组件调用时）传递参数：
1.静态prop，传入的是一个常量 传递给参数title的值是一个字符串 <briup-info title="true" /> <briup-info title=1 /> 传递给参数title的值是一个布尔类型true <briup-info :title="true" /> 传递给参数title的值是一个number类型的1 <briup-info :title="1" /> 传递给参数title的值是一个对象 <briup-info :title="{name:'terry'}" /> 传递给参数title的值是一个数组[1,2,3] <briup-info :title="[1,2,3]" /> 2.动态prop，传入的是一个变量(父组件中声明) 传递给参数title的值是一个布尔值 <briup-info :title="isTitle" title="one"/> data:{ isTitle:true } 传入一个对象的所有属性 <blog-post v-bind="post"></blog-post> post: { likes: 1, title: 'Hello Vue' }例如：
<body> <div id="app"> <bruip-info title='hello' :visible='true'></bruip-info> <bruip-info :title='true' :visible='true'></bruip-info> <bruip-info :title='1' :visible='true'></bruip-info> <bruip-info title=1 :visible='true'></bruip-info> <bruip-info :title='{name:"terry"}' :visible='true'/> </div> <script> // 全局组件 Vue.component('bruip-info',{ template:` <div id="info" v-if="visible"> <i>{{title}}</i> <em>{{typeofTitle}}</em> </div> `, data(){ return{ } }, props:['title','visible'], computed:{ typeofTitle(){ return (typeof this.title); } } }); new Vue({ el:'#app', }) </script> </body>结果分别显示：
父组件通过@xxx='事件函数名’来监听，然后在父组件的methods中声明’事件函数名’这个事件处理函数 子组件通过this.$emit(xxx)来通知父组件,父组件触发监听，从而触发事件处理函数
<body> <div id="app"> <div>total :{{total}}</div> <children @increment="doSomething"></children> </div> <script> Vue.component('children',{ template:` <div id="info"> <button @click="aa">输出值</button> </div> `, methods:{ aa(){ // 第一个参数是用来监听的，第二个参数就是要传给父组件的值 this.$emit('increment','我是子组件传给父组件的值') }, } }); // 根组件 new Vue({ el:"#app", data:{ total:0 }, methods:{ doSomething(data){ this.total++; // data就是子组件传过来的值 console.log(data); // 输出hello } } }) </script> </body>结果显示：
