vue组件

一、组件

1、父组件传递数据到子组件

01、props第一种写法

Vue.component("my-component", {
props: ['msg'],
template: "

child component,{{msg}}

"
})

02、props第二种写法

Vue.component("my-component", {
props: {
msg:{
required:true/false //代表改变是否必须
type:String/Array/Number/Object //传入的变量的类型检查
},
names:{
required:false,
type:Array
}
},
template: "

child component,{{msg}}

"
})

2、子组件如何传递数据给父组件

01、是通过发送事件的方式实现

02、发送事件的过程

//使用组件

<child-component @myevent="handle">

//先注册组件再使用组件
Vue.component("child-component", {
template: "#child",
methods: {
send() {
//子组件向父组件传递数据的方式，是通过事件触发
this.$emit("myevent", "green")

//myevent---->子组件向父组件发送的事件名称
//green----->是发送的数据
}
}
})

//创建vue实例
new Vue({
el: ".box",
data: {
bgColor: 'red'
},
methods: {
handle(data) {
this.bgColor = data
}
}
})

3、非父子组件的通信

01、解决方案：通过中间桥梁实现非父子组件之间的通信

02、实现过程

//创建一个非父子组件之间通信的中间桥梁
var hub = new Vue()

//第一个组件
Vue.component("first-component",{
template:"

<button @click='send'>发送事件

",
methods:{
send(){
//通过中间hub发送事件
hub.$emit("tosecond","some data....")

}
})

//第二个组件
Vue.component("first-component",{
template:"

<button @click='send'>发送事件

",
created:function(){
//通过hub监听事件
hub.$on("tosecond",function(data){
//data---->hub发送事件是所携带的参数
})
}
})

4、组件的实际应用

• style样式

  *{
  margin:0;
  padding:0;
  }
  body{
  padding-top:50px;
  font-size:16px;
  }
  ul>li{
  list-style-type:none;
  }
  .star{
  margin:0 3px;
  color:red;
  }
  .star-empty{
  margin:0 3px;
  color:#ccc;
  }
  label{
  display:inline-block;
  width: 64px;
  text-align:right;
  }
  .title{
  margin:5px 0;
  color:#666;
  font-size:20px;
  }
  .product-list{
  overflow:hidden;
  }
  .list-item{
  float:left;
  margin:10px;
  width:200px;
  }
  .food-img{
  display:inline-block;
  width: 100%;
  height: 150px;
  }

• html样式

  
  

  
  

  
  
  

  {{item.title}}

  
  
  

  
  

  
  
  
  
  

• script样式

  //定义一个评分的组件
  Vue.component("Star",{
  template:"#star",
  data:function(){
  return {
  titles:["总　　评","推　　荐","口味包装"]
  }
  },
  props:{
  stars:{
  required:true,
  type:Array
  }
  },
  created:function(){
  console.log(this.stars)
  }
  })
  new Vue({
  el: ".container",
  data:{
  products:[{
  img: "img/01.jpg",
  title: "商品1",
  stars: [2, 2, 5]
  }, {
  img: "img/02.jpg",
  title: "商品2",
  stars: [3, 4, 4]
  }, {
  img: "img/03.jpg",
  title: "商品3",
  stars: [3, 3, 3]
  }, {
  img: "img/04.jpg",
  title: "商品4",
  stars: [2, 1, 4]
  }]
  }
  })