总结Vue第二天:自定义子组件、父子组件通信、插槽

目录

一、组件:

组件目录

1、注册组件(全局组件、局部组件和demo、template模块):

(1)注册组件的基本步骤:

(2)全局组件demo:

(3)局部组件demo:

(4)template模块的简化(模板的分离写法):即将其内容封装到 template 标签里。

2、组件数据存放:

(1)组件对象也有一个data属性

(2)☆这个data属性必须是一个函数,且函数返回一个对象,对象内部保存着数据

3、父子组件通信(父级向子级传递数据、子级向父级传递数据)

(1)父级向子级传递数据【Prop】:

ps:Prop 验证(组件可以为 props 指定验证要求):

(2)子级向父级传递数据【emit】:

4、Vue父子组件存储数据的访问:

(1)父组件访问子组件data中存储的数据:使用$children或 $refs

(2)$refs的使用:

(3)子组件访问父组件:使用$parent

二、插槽slot

1、编译作用域:

2、slot基本使用:

3、具名插槽slot:


一、组件:

组件目录

1、注册组件(全局组件、局部组件和小demo)

2、组件数据存放

3、父子组件通信(父级向子级传递数据、子级向父级传递数据)

4、父子组件存储数据的访问:

5、插槽slot

1、注册组件(全局组件、局部组件和demo、template模块):

(1)注册组件的基本步骤:

创建组件构造器对象 Vue.extend( ); 方法【可以省略】

注册组件 Vue.component({ 组件的标签名:组件构造器对象} );

使用组件,在Vue实例的作用域范围内使用

(2)全局组件demo:

<div id="app">
    <runoob></runoob>
</div>

<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

(3)局部组件demo:

<div id="app">
    <runoob></runoob>
</div>
 
<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}
 
// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
</script>

(4)template模块的简化(模板的分离写法):即将其内容封装到 template 标签里。

<!-- 使用组件 -->
<my-cpn></my-cpn>
<!-- 模板 -->
<template id="cpn">
  <div>
    <h1>nihao</h1>
  </div>
</template>

  let app = new Vue({
    el: '#app',
    components: {
      'my-cpn': {template: `#cpn`}
    }
  });

2、组件数据存放:

(1)组件对象也有一个data属性

(2)☆这个data属性必须是一个函数,且函数返回一个对象,对象内部保存着数据

总结Vue第二天:自定义子组件、父子组件通信、插槽

3、父子组件通信(父级向子级传递数据、子级向父级传递数据)

(1)父级向子级传递数据【Prop】:

● Prop:子组件在自身标签上,使用自定义的属性来接收外界(也可以是父组件)的数据,然后将数据接收到prop中。【接收父组件的数据—动态Prop,需要v-bind绑定属性,数据可以从vue实例中获取】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>html暂时不支持驼峰写法</title>
</head>
<body>
<div id="app">
  <!--
   子组件要或者外界(例如也可以是父组件)的数据,它是需要在自身标签上,使用props中自定义的属性来接收,
   若是想接收的数据来自父组件【Vue实例】------通过绑定属性(数据可以从vue实例中获取)
  -->
  <!--静态的prop-->
  <cpn c-info="info"></cpn><br/>
  <!--动态prop-->
  <cpn :c-info="info"></cpn>
</div>

<template id="cpn">
  <div>
    <h1>cpn的内容</h1>
    <ul>
      <li v-for="item in cInfo">{{item}}</li>
    </ul>
  </div>
</template>
</body>

<script type="text/javascript" src="./js/vue.min.js"></script>

<script>
  const cpn = {
    template: `#cpn`,
    props:{
      cInfo: {
        type: Object,
        default(){
          return {}
        }
      }
    },
  }

  let app = new Vue({
    el: '#app',
    data: {
      message:'动态绑定属性v-bind',
      abc: {
        id: '1',
        name: '父类的info中的name',
        age: '1'
      },
      info: {
        id: '1',
        name: '父类的info中的name',
        age: '15'
      }
    },
    components: {
      cpn
    }
  });
</script>
</body>
</html>

ps:Prop 验证(组件可以为 props 指定验证要求):

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

(2)子级向父级传递数据【emit】:

● 子组件通过$emit(‘自定义事件名’, 数据变量)向父组件发送消息,在子组件进行自定义的事件进行监听【监听调用的函数可以直接通过一个自定义的参数接收到数据变量】

<!-- 父组件 -->
<div id="app">
  <!-- 子组件上监听到自定义的事件的同时,也监听到发送的数据num,事件指向的函数,通过自定义一个参数value可以直接拿到数据num  -->
  <cpn :c-info="info" @item-click="itemClick"></cpn>
</div>
<!-- 子组件的模板 -->
<template id="cpn">
  <div>
    <h1>子组件的模板</h1>
      <button v-for="item in cInfo"  @click="btnClick(item)">{{item}}</button>
  </div>
</template>
</body>

<script type="text/javascript" src="js/vue.min.js"></script>

<script>
  const cpn = {
    template: `#cpn`,
    data(){
      return{
        num: 99
      }
    },
    props:{
      cInfo: {
        type: Object,
        default(){
          return {}
        }
      }
    },
    methods: {
      btnClick(item){
        console.log('子组件接收到父组件传递的数据' + item);
        //$emit的第一个参数是自定义的事件名称和发送数据num
        this.$emit('item-click', this.num);
      }
    }
  }

  let app = new Vue({
    el: '#app',
    data: {
      info: {
        id: '1',
        name: 'yile',
        age: '15'
      }
    },
    methods: {
      itemClick(value){
        console.log('父组件监听到子组件发出的事件和接收到子组件的数据' + value);
      }
    },
    components: {
      cpn
    }
  });
</script>

4、Vue父子组件存储数据的访问:

(1)父组件访问子组件data中存储的数据:使用$children或 $refs

(注意:this.$children得到的是一个数组,包含所有子组件对象。)

(2)$refs的使用:

       ■ $refs和ref指令通常是一起使用的

       ■ 首先,我们通过ref给某一个子组件绑定一个特定的ID

       ■ 其次,通过this.$refs.ID就可以访问到该组件了

总结Vue第二天:自定义子组件、父子组件通信、插槽

(3)子组件访问父组件:使用$parent

二、插槽slot

1、编译作用域:

父组件模板的所有东西(例如变量)都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。

2、slot基本使用:

3、具名插槽slot:

上一篇:C++模板


下一篇:<五>子父组件间的交互