前端笔记Vue项目day3(二）

 

局部注册

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

• [mw_shl_code=applescript,true]<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>[/mw_shl_code]
• Vue组件之间传值父组件向子组件传值

  • 父组件发送的形式是以属性的形式绑定值到子组件身上。

  • 然后子组件用属性props接收

  • 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制

  • [mw_shl_code=applescript,true]<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>[/mw_shl_code]
  •