vue双向数据绑定

一：v-model

父组件引用子组件时，可以使用 v-model="params"  绑定一个变量，

在子组件中，需要使用props去接收一个value变量，即父组件绑定到的params的值

在子组件中，使用this.$emit("input" , someData); 可以触发父组件的input事件，someData是参数，它的值会赋给父组件的params的变量。

 

这种写法是一种简化的写法，是vue的语法糖。他也可以写成

 

 父组件：

<v-children v-bind:value="params"  @input="input(params)"></v-children>

子组件：

this.$emit("input" , someDta);

二： 自定义传值

父组件：

    <myc :names='names' @changeValChild="changeVal"></myc>

或者：
   <myc names='names' @changeValChild="changeVal"></myc>

//区别：前者‘names'是一个变量，后者names会当作字符串处理

methods: {
　　changeVal () {
　　　　flag ? this.names = '修改前' : this.names = '修改后的值'
　　　　flag = !flag
　　}
}

子组件：

    <h1>{{ names }}</h1>
    <h2>my components</h2>
    <button @click='letParentchangeVal'>修改</button>



  methods: {
    letParentchangeVal () {
      this.$emit('changeValChild')
    }
  }

三：双向数据绑定

//子组件

<template>
  <div class="myc">
    <h1>{{ getName }}</h1>
    <input type="text" v-model='getName'>
    <input type="text" v-model='names'>
    <button @click='letParentchangeVal'>修改</button>

  </div>
</template>

<script>
export default {
  name: 'myc',
  data () {
    return {
      getName: this.names
    }
  },
  props: {
    names: {
      type: String
      // default: '默认值'
    }
  },
  watch: {
    getName (val) {
      //  设置监听，如果改变就更新
      this.$emit('update:names', val)
    }
  },
  methods: {
    letParentchangeVal () {
      this.$emit('changeValChild')
    }
  }
}
</script>

// 父组件

<template>
  <div class="hello">

    <h1>{{ names }}</h1>
    <h2>父组件</h2>
  
    <myc :names.sync='names' @changeValChild="changeVal"></myc>
  </div>
</template>

<script>
import myc from './mycomponent/page'
let flag = false
export default {
  name: 'hello',
  components: {
    myc
  },
  data () {
    return {
      names: '初始化'
    }
  },
  methods: {
    changeVal () {
      flag ? this.names = '修改前' : this.names = '修改后的值'
      flag = !flag
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

.sync 在vue2.0版本废除，但是在2.3版本之后又恢复使用