父子组件之间的通信,其实看文档呢, 已经介绍很多了,这里主要是要demo来说明 ,用起来比较方便
在shop.vue中传送数据到子组件中, 直接上代码
template部分的:
<template> <div class="app"> 请输入你想说的: <input type="text" v-model="msg"> <br> <!-- 下面是使用组件 并通过v-bind:message 来绑定父组件中msg 进行传值 --> <hello-world :message="msg"></hello-world> </div> </template>JavaScript部分:
<script> import HelloWorld from '@/components/HelloWorld' //引入组件 export default { data(){ return{ msg: '' } }, components:{ HelloWorld } } </script>接下来是子组件代码:
子组件接收的话 在props中可以写很多的, 传入的值可以是对象,或者数组啊 ,具体的我就介绍了 ,看文档就好哈
<template> <div class="hello"> <div class="one">你说啥: {{message}}</div> </div> </template> <script> export default { name: 'HelloWorld', props:{ message: String }, data () { return { } } }message在props中已经有了,就不需要在data中再次声明了, 刚刚开始我也犯错 哈哈 有问题可以加qq729455358 互相学习!!!
转载于:https://www.cnblogs.com/PinkYun/p/10083430.html
