• Vue.js入门教程（五）

    目录

    组件的全局注册

    组件的局部注册

    组件多级嵌套使用

    脚手架中的Vue组件

    组件之间传值

    1：父组件向子组件传值

    2：子组件向父组件传值

    方式一：回调函数的方式

    方式二：自定义事件  @绑定 的方式

    方式三：自定义事件 ref绑定 的方式

    自定义事件解绑

     3：任意组件之间传值

    Vue中的插槽

    简介

    默认插槽

    具名插槽

    作用域插槽

    Vue组件中的混用功能

    Vue的组件化编程

    组件的全局注册

    Vue.component("组件名称", {})        // 声明一个全局组件

    2. <body>
    3.     <div id="app">
    4.         
    5.         <button-counter>button-counter>
    6.     div>
    7.     <script>
    8.         // 声明一个全局组件
    9.         Vue.component('button-counter', {
    10.             data() {    // 组件提供的data函数(为什么是data函数，不是data属性？因为属性的值被改变了，其他使用此属性的值都会被改变，而函数不会)
    11.                 return {count:0}
    12.             },
    13.             template: '',
    14.         });
    15.         new Vue({
    16.             el: "#app"
    17.         });
    18.     script>
    19. body>

    组件的局部注册

    const c = Vue.extend({});               // 声明一个局部组件，返回组件对象

    2. <body>
    3.     <div id="app">
    4.         
    5.         <c>c>
    6.     div>
    7.     <script>
    8.         // 声明一个局部组件
    9.         const c = Vue.extend({
    10.             data() {    // 组件提供的data函数(为什么是data函数，不是data属性？因为属性的值被改变了，其他使用此属性的值都会被改变，而函数不会)
    11.                 return { count: 0 }
    12.             },
    13.             template: '',
    14.         });
    15.         new Vue({
    16.             el: "#app",
    17.             components: {   // 局部声明的组件，要在Vue实例里使用components块注册
    18.                 c: c         // 属性名和属性值相同，可以简写成 c 
    19.             }
    20.         });
    21.     script>
    22. body>

    组件多级嵌套使用

    2. <body>
    3.     <div id="app">
    4.         
    5.         <aa>aa>
    6.     div>
    7.     <script>
    8.         // 二级组件
    9.         const bb = Vue.extend({
    10.             data() {   
    11.                 return { name: '二级组件' }
    12.             },
    13.             template: '
       {{ name }} 
      '      ,
    14.         });
    15.  
    16.         // 一级组件
    17.         const aa = Vue.extend({
    18.             data() {   
    19.                 return { name: '一级组件' }
    20.             },
    21.             template: `
    22.                     
       {{ name }} 
    23.                     
    24.                 
      `,
  • components: {
  • bb
  • }
  • });
  • new Vue({
  • el: "#app",
  • components: {
  • aa
  • }
  • });
  • script>
  • body>

    • 脚手架中的Vue组件

    脚手架中的Vue组件就是上面讲到的 局部组件 Vue.extend()。Vue.extend() 变成脚手架的方式就是把返回值变成了 export default 导出的方式，然后父组件 import 进行导入，template 属性被