vue基础--组件通信

父子组件通信

父到子

步骤：

1. 在 子组件标签上 通过添加自定义属性的方式, 指定要传递的数据
2. 在 子组件中 通过 props 属性, 显示指定 由父组件传递过来的数据. 然后, 才可以在子组件中使用

使用

<div id="app">
    //:foo 表示要传递给子组件一个叫做 foo 的属性， 它的值是：父组件中的msg属性的值
    <child :foo="msg"></child>
</div>

components: {
        // 子组件
        child: {
          template: `<h1>子组件中的内容：{
  { foo }}</h1>`,
          // props 名称是固定的!!!
          // 对于父组件传递过来的数据, 必须通过props显示的指定, 才能在子组件中使用
          // 指定以后, props 就相当于组件内部的 data 数据了