一句话VUE
2018-09-05 本文已影响0人
楼下小黑666
父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息
props特性就是定义的content=”hello world”，经过H5页面解析之后，不会且不存在于html标签内作为属性！反之就是非props特性，就会以属性的方式，存在于html标签内，这一点可以通过浏览器控制台查看代码的解析效果去理解。
给元素绑定事件，如：@click ，是绑定的一个原生事件，但给组件绑定@click事件，是绑定的一个监听事件。要触发这个事件得听过子组件向外抛出这个被监听的事件。
要给组件绑定原生事件，需要加一个后缀修饰符，@click.native，表示给组件绑定一个原生事件
VUE非父子组件传值，一般有两种方法，1.就是才用js的发布订阅模式，2.用vuex工具库
js发布订阅模式例子如下：
注意引入VUE的js库
......
<body>
<div id = "app">
<counter content="dell"></counter>
<counter content="lee"></counter>
</div>
<script>
Vue.prototype.bus = new Vue();
Vue.component('counter',{
data:function(){
return {
selfContent:this.content
}
},
props:{
content: {
type :String
}
},
template: "<div @click = 'handleClick'> {{selfContent}}</div>",
methods:{
handleClick : function(){
this.bus.$emit("change",this.selfContent);
}
},
mounted:function(){
var this_ = this;
this.bus.$on('change',function(msg){
this_.selfContent = msg;
})
}
})
var vm = new Vue({
el : "#app"
})
</script>
</body>
......
