head部分:
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="bower_components/vue/dist/vue.min.js"></script>
body的html代码:
<div id="app"> <p>{{theMessage}}</p> <!--这里绑定的方法要和子组件里绑定触发的子组件事件的方法一致,方法名不建议驼峰命名法--> <!--这里父组件绑定的theMessage被子组件改变后返回到父组件--> <newcomponent :message="theMessage" v-on:addcount="executeadd"></newcomponent> </div>
script部分代码:
<script> //import 是es6支持且需要node环境支持 //import newcomponent from "../components/newcomponent"; new Vue({ el:"#app", data:{ theMessage:0 }, components:{ newcomponent:{ props:["message"], template:'<button @click="add">{{message}}</button>', methods:{ //这里是子组件里的方法绑定父组件的方法,即父组件的addCount方法触发子组件的add方法 add:function(){ this.$emit('addcount'); } } } }, methods:{ executeadd:function(){ this.theMessage+=1; } } }); </script>
总结:其实这一部分的最大的困惑点就是父组件和子组件的概念,我个人的理解如果简单来说的话,就类似与父子元素差不多,不过我们抽象的这么来看:
<我们自定义的组件,即父组件 我有个属性值=value>
<!--下面是子组件-->
<div>{{value}}</div><!--我拿到了父组件的属性值,它可以通过这个属性值给我传输数据--> </我们自定义的组件,即父组件>