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