Vue中组件之间的传值方式-------父组件向子组件传值

时间 2020-08-10 标签 vue 中组件之间传值方式父组件子组件传值

<body>
    <div id="app">
      <div>{{msg}}</div>
      <!-- 父组件向子组件传值 1.由于menu-item在app中嵌套着，因此它是子组件-->
      <!-- 2.能够给子组件传递一个静态的值，也能够经过属性绑定的形式传递一个动态的值（来自父组件data中的数据） -->
      <menu-item
        title="父组件向子组件传递的值1"
        content="父组件向子组件传递的值2"
        :ptitle="msg"
      ></menu-item>
    </div>
    <script>
      Vue.component("menu-item", {
        props: ["title", "content", "ptitle"], //子组件经过props来进行接收，命名规则：驼峰命名法
        data: function() {
          return {
            msg1: "嗯嗯嗯嗯"
          };
        },
        template:
          "<div>{{msg1+'-----'+title+'------'+content+'-----'+ptitle}}</div>" //模板当中的组件用短横线的方式，字符串中的模板中没有这个限制
      });
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "我是父组件中的值(父组件向子组件传递的值3)"
        }
      });
    </script>
  </body>

总结：
1.父组件发送的形式是以属性的形式绑定值到子组件身上。
2.而后子组件用属性props接收
3.在props中使用驼峰形式，模板中须要使用短横线的形式字符串形式的模板中没有这个限制javascript