vue的组件通讯

原创于 2022-01-31 20:02:45 发布

· 530 阅读

0 ·

版权

文章标签：

#vue.js #javascript #前端

1.父组件传到子组件

父组件是通过props属性给子组件通信的
数据是单向流动父—>子（子组件中修改props数据，是无效的，会有一个红色警告）

父组件parent.vue代码如下

 <template>
   <div class="parent">
     <h2>{{ msg }}</h2>
     <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
 </div>
 </template>
 <script>
 import son from './Son' //引入子组件
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '父组件',
     }
   },
   components:{son},
 }
 </script>