这里有一个 Vue 组件的示例：
// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 button-counter。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
<div id="app"> <button-counter></button-counter></div> var app = new Vue({ el: '#app'})因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
通过 Prop 向子组件传递数据Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：
示例：
<div id="app"> <ul> <!-- 把item的值赋值给product变量(props中的值),向子组件传递数据 --> <product-com v-for="item,index in productList" :product="item"></product-com> </ul></div> Vue.component("product-com",{ // 通过 Prop 向子组件传递数据 props: ["product"], template: `<li><h3>产品名称：{{ product.title }}</h3><h4>产品描述：{{ product.brief }}</h4><p>产品价格：{{ product.prize }}</p></li>`,})var app = new Vue({ el: "#app", data: { productList: [ { title: "产品1", brief: "产品描述1", prize: "价格1" }, { title: "产品2", brief: "产品描述2", prize: "价格2" }, { title: "产品3", brief: "产品描述3", prize: "价格3" }, { title: "产品4", brief: "产品描述4", prize: "价格4" }, ] }})效果图：
通过 $emit 向父组件传递数据语法：
vm.$emit( eventName, […args] )vm – Vue的实例化对象
$emit – Vue实例化对象中的一个方法
eventName – 传递给父组件的事件名称
args – 需要传递给父组件的数据内容
示例：
<div id="app"> <ul> <school v-for="item,index in schoolList" @cschool="changeEvent" :index="index" :schoolname="item"></school> </ul> <h2>选中的学校是：{{ chooseSchool }}</h2></div> Vue.component("school",{ // 通过prop父组件向子组件传递数据 props: ["index","schoolname"], template: `<li><h3>{{ index }}--学校名称：{{ schoolname }}</h3><button @click="chooseEvent(schoolname)">选择学校</button></li>`, methods: { chooseEvent: function(schoolname){ // console.log(schoolname); // 通过$emit给父组件传递数据 this.$emit("cschool",schoolname); } }})var app = new Vue({ el: "#app", data: { schoolList: ["清华","北大","浙大"], chooseSchool: "" }, methods: { changeEvent: function(data){ // console.log(data); this.chooseSchool = data; } }})子组件会先接收到父组件传递过来的数据，进行页面挂载(渲染)，当点击子组件中的button按钮时，会触发 chooseEvent 事件，这个事件会通过 $emit 实例方法把数据传递给父组件，父组件使用 $emit 自定义的事件名，所以当我点击子组件的button按钮时，父组件的 $emit 自定义的事件会触发，然后就可以直接更新数据了
组件传值的奇技淫巧父元素方法传值给子元素
<div id="app"> <ul> <!-- 因为父元素的方法可以直接修改父元素的数据所以将父元素的方法传递给子元素然后由子元素进行调用，从而修改父元素的数据--> <school v-for="item,index in schoolList" :action="changeEvent" :index="index" :schoolname="item"></school> </ul> <h2>选中的学校是：{{ chooseSchool }}</h2></div> Vue.component("school",{ // 通过prop父组件向子组件传递数据 props: ["index","schoolname","action"], template: `<li><h3>{{ index }}--学校名称：{{ schoolname }}</h3><button @click="chooseEvent(schoolname)">选择学校</button></li>`, methods: { chooseEvent: function(schoolname){ // console.log(schoolname); // 这里只是使用父组件的changeEvent方法而已，并没有改变changeEvent方法的this指向 this.action(schoolname) } }})var app = new Vue({ el: "#app", data: { schoolList: ["清华","北大","浙大"], chooseSchool: "" }, methods: { changeEvent: function(data){ // console.log(data); this.chooseSchool = data; } }})通过父元素数据直接修改
Vue.component("school",{ // 通过prop父组件向子组件传递数据 props: ["index","schoolname"], template: `<li><h3>{{ index }}--学校名称：{{ schoolname }}</h3><button @click="chooseEvent(schoolname)">选择学校</button></li>`, methods: { chooseEvent: function(schoolname){ // console.log(schoolname); // console.log(this); // 组件可以通过$parent属性找到父元素的Vue对象 this.$parent.changeEvent(schoolname) } }})子元素通过调用$parent的方法修改父元素的内容
Vue.component("school",{ // 通过prop父组件向子组件传递数据 props: ["index","schoolname"], template: ` <li> <h3>{{ index }}--学校名称：{{ schoolname }}</h3> <button @click="$parent.changeEvent(schoolname)">选择学校</button> </li> `})子元素传值父元素
Vue.component("school",{ // 通过prop父组件向子组件传递数据 props: ["index","schoolname"], template: ` <li> <h3>{{ index }}--学校名称：{{ schoolname }}</h3> <button @click="$parent.chooseSchool = schoolname">选择学校</button> </li> `})$root
Vue.component("school",{ // 通过prop父组件向子组件传递数据 props: ["index","schoolname"], template: ` <li> <h3>{{ index }}--学校名称：{{ schoolname }}</h3> <button @click="$root.changeEvent(schoolname)">选择学校</button> </li> `})