对于 web 前端来说组件是必不可少的东西之一, 而且组件的多种多样, 有时候让程序员也很是烦恼, 对于一些不了解的组件使用起来也不是很顺畅, 下面小猿圈 Web 前端讲师就总结了 v-model 在组件中如何使用, 希望对于学习前端中的你有所帮助.
其实 v-model 在组件中的使用感觉就是传值的过程, vue 在传值过程中方式还是比较多的, 比如 event 或者 props 等, 只不过今天咱们重点来说一下 v-model 在组件中如何使用.
实现点击回应后, 父亲对儿子说的话变成了儿子的回应. 儿子收到的信息也变了, 实现通信.
- <!-- 父组件 -->
- <template>
- <p class="parent">
- <p>
- 我是父亲, 对儿子说: {{sthGiveChild}}
- </p>
- <Child v-model="sthGiveChild">
- </Child>
- </p>
- </template>
- <script>
- import Child from './Child.vue';
- export
- default {
- data() {
- return {
- sthGiveChild:
- '给你 100 块'
- };
- },
- components: {
- Child
- }
- }
- </script>
- <!-- 子组件 -->
- <template>
- <p class="child">
- <p>
- 我是儿子, 父亲对我说: {{give}}
- </p>
- <a href="javascript:;" rel="external nofollow" rel="external nofollow"
- rel="external nofollow" @click="returnBackFn">
- 回应
- </a>
- </p>
- </template>
- <script>
- export
- default {
- props:
- {
- give:
- String
- },
- model: {
- prop: 'give',
- event: 'returnBack'
- },
- methods: {
- returnBackFn() {
- this.$emit('returnBack', '还你 200 块');
- }
- }
- }
- </script>
默认情况下, 一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event.
小猿圈 Web 讲师提醒大家: 每天学习一点技术问题, 只要功夫深, 铁杵磨成针, 学习不是一朝一夕的, 是需要付出行动的, 而且还要坚持, 学习新的技术需要不断的查阅资料, 看视频, 复习, 练习, 如果你工作中或者生活中遇到什么问题 Web 前端自学2群: 738735873, 可以到小猿圈去寻找答案的, 相信会给你满意的答复的.
来源: http://www.jianshu.com/p/8b34f8b8d404