标签：script app color function ddc 部分 new exec 环境
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><!--我拿到了父组件的属性值，它可以通过这个属性值给我传输数据--> </我们自定义的组件，即父组件>
标签：script app color function ddc 部分 new exec 环境
原文地址：https://www.cnblogs.com/sujinchen/p/14655594.html
