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:
          "
{{msg1+'-----'+title+'------'+content+'-----'+ptitle}}
"
//模板当中的组件用短横线的方式,字符串中的模板中没有这个限制 }); var vm = new Vue({ el: "#app", data: { msg: "我是父组件中的值(父组件向子组件传递的值3)" } }); </script> </body>

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

你可能感兴趣的:(Vue中组件之间的传值方式-------父组件向子组件传值)