【郑州校区】前端笔记Vue项目 第3天 2

局部注册

• 只能在当前注册它的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>

【郑州校区】前端笔记Vue项目 第3天 2

局部注册

• 只能在当前注册它的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>