<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js" ></script>
</head>
<body>
<div id="app">
<!-- <component message="[1,2,3]"></component>
传递数据时 不适用v-bind则传递的数字,布尔类型,字符串,Object类型,数组类型当作字符串传递
<component :message="[1,2,3]"></component>
-->
{{message}}
<button @click="handleclick">获取子组件数据</button>
<component ref="com"></component>
</div>
<script>
//组建的简单使用
var component=Vue.component("component",{
template:"<div>组件测试,数量:{{count}},价格:{{price}},总价:{{total}}----{{sign}}</div>",
data(){
return {
count:10,
price:100,
total:1000,
sign:"人民币"
}
}
});
//多个组件实例引用同一个数据对象,哪一个的变化都影响其他的
var data={
count:0
}
var component=Vue.component("component",{
template:"<div><button @click='handleclick'>点击我</button><p>{{count}}</p></div>",
data(){
return data;
},
methods:{
handleclick(){
data.count++;
}
}
})
//父组件给子组件传递正确的数据
var cpmponent=Vue.component("component",{
template:"<div>{{message.length}}</div>",
props:["message"]
})
//单向数据流,可双向绑定
var component=Vue.component("component",{
props:["count"],
data(){
return{
count:this.count
}
},
template:"<div>{{count}}<button @click='handleclick'>点击我</button></div>",
methods:{
handleclick(){
this.count++;
}
}
})
//数据验证特性不一定起作用
var component=Vue.component("component",{
template:"<div>{{name}}</div>",
props:{
name:String
}
})
//组件通信之自定义事件
var component=Vue.component("component",{
template:"<div> <button @click='handleclick'>点击我就可以修改父组件数据</button></div>",
methods:{
handleclick(){
this.$emit("post",10);
}
}
})
//组件通信之v-model(自定义事件通信的简化,会触发input事件)
var component=Vue.component("component",{
template:"<div> <button @click='handleclick'>点击我就可以修改父组件数据</button></div>",
methods:{
handleclick(){
this.$emit("input",10);
}
}
})
//组件通信之事件中心
var bus=new Vue();
var component=Vue.component("component",{
template:"<div><button @click='handleclick'>点击我传递事件</button></div>",
methods:{
handleclick(){
bus.$emit("post","来自自组的数据");
}
}
});
*/
//组件通信之父链,不提倡使用,父子间耦合性大,子组件直接修改
var component=Vue.component("component",{
template:"<div><button @click='handleclick'>点击我就可以改变父组件的数据</button></div>",
data(){
return{
message:"通过子组件索引获取子组件信息"
}
},
methods:{
handleclick(){
this.$parent.message="子组件改变了我的数据";
}
}
})
var app=new Vue({
el:"#app",
data:{
//count:0
message:"父组件原始数据"
},
/*mounted(){
var _this=this;
bus.$on("post",function(data){
_this.message=data;
});
}
methods:{
handleclick(){
this.message=this.$refs.com.message;
}
}
});
</script>
</body>
</html>
This article is a comprehensive multiple instances, need some adjustments in order to use the correct import