[vue] .sync实现父子组件的双向绑定数据

父组件

<template>
	 <div>
	     <buttonLink :title.sync='title'>提交buttonLink>
	 div>
template>
1
2
3
4
5

import buttonLink from '@/components/button'
export default {
  components:{ buttonLink },
  data() {
    return {
      title:'123'
    };
  }
};
1
2
3
4
5
6
7
8
9

子组件

<template>
	 <div>
	     <el-button type='primary' @click='change'>
	         <slot>submitslot>
	     el-button>
	 div>
template>
1
2
3
4
5
6
7

export default {
  props:{
    title:{
        type:String
    }
  },
  data() {
    return {};
  },
  methods: {
      change(){
         this.$emit('update:title','456')
      }
 }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16