Vue组件间通信,与服务器端通信

组件间通信

父组件与子组件通信: props down

//send

//receive
vue.component('son', {
//子组件类,在进行实例化时,
//会读取mytitle属性对应的值
//并保存在mytitle的变量
// this.mytitle
  props: ['mytitle']
})

子组件与父组件通信:events up

//binding
vue.component('father', {
  methods: {
    rcvmsg(msg) {
      //msg就是通过事件传递来的值
   }
 },
 template:` `
})
//emit
vue.component('son',{
 methods:{
   senddata(){
     this.$emit('customevent',msg)
   }
 }
})

若父组件要想获取子组件的数据,不通过子组件触发事件也能获取想要的值

//①调用子组件时 指定ref


//②在父组件中 可以通过myson得到子组件实例
this.$refs.myson

每一个组件的实例 都有一个$parent属性,记录的是他的父组件实例

this.$parent

兄弟组件间通信

var bus = new vue()
//receive binding
bus.$on('customevent', function(msg){})
//send emit
bus.$emit('customevent', 123)

vue与服务器端的通信

vue-resource.js
this.$http.get().then((response)=>{})

你可能感兴趣的:(Vue组件间通信,与服务器端通信)