在使用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>
上面的代码就可以实现当我在父组件的文本框中输入内容的时候,子组件的内容也会随着发生变化