【郑州校区】前端笔记Vue项目day3(二） - 黑马程序员技术交流社区

只能在当前注册它的vue实例中使用

[AppleScript] 纯文本查看 复制代码

<div id="app">

      <my-component></my-component>

  </div>





<script>

    // 定义组件的模板

    var Child = {

      template: '<div>A custom component!</div>'

    }

    new Vue({

      //局部注册组件  

      components: {

        // <my-component> 将只在父模板可用  一定要在实例上注册了才能在html文件中使用

        'my-component': Child

      }

    })

 </script>

Vue组件之间传值父组件向子组件传值

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

[AppleScript] 纯文本查看 复制代码

<div id="app">

    <div>{{pmsg}}</div>

     <!--1、menu-item  在 APP中嵌套着 故 menu-item   为  子组件      -->

     <!-- 给子组件传入一个静态的值 -->

    <menu-item title='来自父组件的值'></menu-item>

    <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle  来自父组件data 中的数据 . 

                  传的值可以是数字、对象、数组等等

        -->

    <menu-item :title='ptitle' content='hello'></menu-item>

  </div>



  <script type="text/javascript">

    Vue.component('menu-item', {

      // 3、 子组件用属性props接收父组件传递过来的数据  

      props: ['title', 'content'],

      data: function() {

        return {

          msg: '子组件本身的数据'

        }

      },

      template: '<div>{{msg + "----" + title + "-----" + content}}</div>'

    });

    var vm = new Vue({

      el: '#app',

      data: {

        pmsg: '父组件中内容',

        ptitle: '动态绑定属性'

      }

    });

  </script>