props 从父组件传递数据到子组件

在使用vue的时候，肯定会用到组件之间的数据传递，props的作用就是从父组件将数据传递到子组件

在子组件中写如下代码：

<template>
    <div class="practice">
        <p>{{message}}</p>
    </div>
</template>
<script>
    export default {
        name:'practice',
        props:['message']
    }
</script>

父组件中写着：

<template>
  <div id="app">
    <practice message="qweqwe"></practice>
  </div>
</template>
import practice from './components/practice'
export default {
  name: 'App',
  components: {
    practice
  }
}

注意：在使用子组件的时候是需要注册的，props在子组件中定义之后，就可以使用父组件中的数据了

但是，有时候，我们的数据难免需要变化，因此，我们可以使用v-model来实现数据双向绑定，同时,使用v-bind来监测（我在这里用到了v-bind的语法糖）

子组件：

<template>
    <div class="dy">
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        name:'dy',
        props:['msg']
    }
</script>

父组件：

<template>
  <div id="app">
    <input type="text" v-model="parent">
    <dy :msg="parent"></dy>
  </div>
</template>

<script>
import dy from './components/dy'
export default {
  name: 'App',
  data(){
    return{
      parent: ''
    }
  },
  components: {
    dy
  }
}
</script>

上面的代码就可以实现当我在父组件的文本框中输入内容的时候，子组件的内容也会随着发生变化