• VUE学习三：双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)

    文章目录

    导言

    1. let、const和var的区别（涉及块级作用域）
    2. JavaScript 中双引号、单引号和反引号的区别

    一、01-v-model使用

    1. 01-v-model的基本使用.html

    v-mode指令 大多用在表单上进行双向绑定

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>

<div id="app">
  <input type="text" v-model="message">
  {{message}}
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在这里插入图片描述

    2. 02-v-model的原理.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>

<div id="app">
  <h1>v-model: 双向绑定h1>
  <input type="text" v-model="message"><br>
  <h1>v-bind: 单向绑定,data数据传递到页面。  input事件: 监听用户输入的数据传递到data中h1>
  <input type="text" :value="message" @input="valueChange"><br>
  <input type="text" :value="message" @input="message = $event.target.value">
  <h2>{{message}}h2>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      valueChange(event) {
        // event 不需要传参，会自动传值
        console.log(event)
        // event.target.value 表单中的输入值
        this.message = event.target.value;
      }
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    在这里插入图片描述

    3. 03-v-model结合radio类型.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>

<div id="app">
  <label for="male">
    
    <input type="radio" id="male" value="男" v-model="sex">男
  label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  label>
  <h2>您选择的性别是: {{sex}}h2>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      sex: '女'
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    在这里插入图片描述

    4. 04-v-model结合checkbox类型.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>

<div id="app">
  <h1>1.checkbox单选框: 对应 Boolean类型h1>
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  label>
  <h5>您选择的是: {{isAgree}}h5>
  <button :disabled="!isAgree">下一步button>

  <h1>2.checkbox多选框: 对应 数组类型h1>
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h5>您的爱好是: {{hobbies}}h5>

  <h5>值绑定: 从data 中获取数据进行 展示h5>
  <label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  label>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isAgree: false, // 单选框
      hobbies: [], // 多选框,
      originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    在这里插入图片描述

    5. 05-v-model结合select类型.html（下拉多选有问题）

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>

<div id="app">
  <h1>1.选择一个:字符串类型h1>
  <select name="abc" v-model="fruit">
    <option value="苹果">苹果option>
    <option value="香蕉">香蕉option>
    <option value="榴莲">榴莲option>
    <option value="葡萄">葡萄option>
  select>
  <h4>您选择的水果是: {{fruit}}h4>

  <h1>2.选择多个：数组类型h1>
  <select name="abc" v-model="fruits" multiple size="3">
    <option value="苹果">苹果option>
    <option value="香蕉">香蕉option>
    <option value="榴莲">榴莲option>
    <option value="葡萄">葡萄option>
    <option value="橘子">橘子option>
  select>
  <h4>您选择的水果是: {{fruits}}h4>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      fruit: '香蕉',
      fruits: []
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    在这里插入图片描述

    6. 06-v-model修饰符的使用.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>

<div id="app">
  <h1>1.修饰符: lazy: 点击回车的时候 会进行 实时绑定h1>
  <input type="text" v-model.lazy="message">
  <h2>{{message}}h2>


  <h1>2.修饰符: number: v-model默认绑定为 string类型, number改变类型h1>
  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}h2>

  <h1>3.修饰符: trim ：去掉表单中输入的两边的空格h1>
  <input type="text" v-model.trim="name">
  <h2>您输入的名字:{{name}}h2>
div>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      age: 0,
      name: ''
    }
  })

  var age = 0
  age = '1111'
  age = '222'
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    在这里插入图片描述

    二、02-组件化开发

    1. 01-组件化的基本使用.html

    1. 创建组件构造器对象 Vue.extend({})
    2. 注册(全局)组件:Vue.component('my-cpn', cpnC)
    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-组件化的基本使用title>
head>
<body>

<div id="app">
  
  <my-cpn>my-cpn>
  <my-cpn>my-cpn>

  <div>
    <div>
      <my-cpn>my-cpn>
    div>
  div>
div>

<my-cpn>my-cpn>

<script src="../../lib/vue.js">script>
<script>
  
  // ES6语法：定义字符串的 单引号、双引号  和 `` 的区别
  const a = '12' +
          '34';
  const b = `we
            qw`;
  
  // 1.创建组件构造器对象
  const cpnC = Vue.extend({
    template: `
      
    
        
    我是标题
    
        
    我是内容, 哈哈哈哈
    
        
    我是内容, 呵呵呵呵
    
      
    `    
  })

  // 2.注册组件
  Vue.component('my-cpn', cpnC)
  
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54

    在这里插入图片描述

    2. 02-全局组件和局部组件.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-全局组件和局部组件title>
head>
<body>

<div id="app">
  <cpna>cpna>
  <cpnb>cpnb>
div>

<hr>

<h1>下面的不显示，说明 局部组件 只能使用在挂载的地方h1>
<div id="app2">
  <cpna>cpna>
div>

<script src="../../lib/vue.js">script>
<script>
  // 1.创建局部组件构造器
  const cpna = Vue.extend({
    template: `
      
    
        
    我是标题a: 局部组件
    
        
    我是内容a,哈哈哈哈啊
    
      
    
        `    
  })
  
  // 2. 全局组件
  const cpnb = Vue.extend({
    template: `
      
    
        
    我是标题b: 全局组件
    
        
    我是内容,哈哈哈哈啊
    
      
    
        `    
  })

  // 3.注册组件(全局组件, 意味着可以在多个Vue的实例下面使用)
  Vue.component('cpnb', cpnb)

  // 疑问: 怎么注册的组件才是局部组件了?

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    // 局部组件定义的位置
    components: {
      // cpnA 使用组件时的标签名
      cpna: cpna
    }
  })

  const app2 = new Vue({
    el: '#app2'
  })
    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66

    在这里插入图片描述

    3. 03-父组件和子组件.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-父组件和子组件title>
head>
<body>

<div id="app">
  <cpn2>cpn2>
  
div>

<script src="../../lib/vue.js">script>
<script>
  // 1.创建第一个组件构造器(子组件)
  const cpnC1 = Vue.extend({
    template: `
      
    
        
    我是标题1: 子组件
    
        
    我是内容, 哈哈哈哈
    
      
    
        `    
  })


  // 2.创建第二个组件构造器(父组件)
  const cpnC2 = Vue.extend({
    template: `
      
    
        
    我是标题2: 父组件
    
        
    我是内容, 呵呵呵呵
    
        
      
    
        `    ,
    components: {
      cpn1: cpnC1
    }
  })

  // root组件
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn2: cpnC2
    }
  })
    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54

    在这里插入图片描述

    4. 04-组件(全局和局部)的语法糖注册方式.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-组件的语法糖注册方式title>
head>
<body>

<div id="app">
  <cpn1>cpn1>
  <cpn2>cpn2>
div>

<script src="../../lib/vue.js">script>
<script>
  // 1.全局组件注册的语法糖
  // 1.创建组件构造器
  // const cpn1 = Vue.extend({
  //   template: `
  //     
    
  //       
    我是标题1
    
  //       
    我是内容, 哈哈哈哈
    
  //     
    
  //   `
  // })

  // 2.注册全局组件
  Vue.component('cpn1', {
    template: `
      
    
        
    我是标题1: 全局组件
    
        
    我是内容, 哈哈哈哈
    
      
    
        `    
  })

  // 2.注册局部组件的语法糖
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      'cpn2': {
        template: `
          
    
            
    我是标题2: 局部组件
    
            
    我是内容, 呵呵呵
    
          
    
        `    
      }
    }
  })
    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    在这里插入图片描述

    5. 05-组件模板的分离写法.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05-组件模板的分离写法title>
head>
<body>

<div id="app">
  <cpn1>cpn1>
  <cpn2>cpn2>
div>


<script type="text/x-template" id="cpn1">
<div>
  <h2>我是标题: script标签 创建的模版-全局组件</h2>
  <p>我是内容,哈哈哈</p>
</div>
script>


<template id="cpn2">
  <div>
    <h2>我是标题: template标签 创建的模版-全局组件h2>
    <p>我是内容,呵呵呵p>
  div>
template>

<script src="../../lib/vue.js">script>
<script>

  // 2.注册一个全局组件
  Vue.component('cpn1', {
    template: '#cpn1'
  })
  Vue.component('cpn2', {
    template: '#cpn2'
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50

    在这里插入图片描述

    6. 06-组件中的数据存放问题.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06-组件中的数据存放问题title>
head>
<body>

<div id="app">
  <cpn>cpn>
  <cpn>cpn>
div>



<template id="cpn">
  <div>
    <h2>{{title}}h2>
    <p>我是全局组件 模版中的数据,呵呵呵p>
  div>
template>

<script src="../../lib/vue.js">script>
<script>

  // 1.注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn',
    data() {
      return {
        title: 'abc'
      }
    }
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      // title: '我是标题'
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    在这里插入图片描述

    7. 07-组件中的data为什么是函数.html

    • 为什么data在组件中必须是一个函数呢?
      1. 首先，如果不是一个函数，Vue直接就会报错。
      2. 其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。
    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>07-组件中的data为什么是函数title>
head>
<body>


<div id="app">
  <cpn>cpn>
div>

<template id="cpn">
  <div>
    <h2>全局组件-模版中-当前计数: {{counter}}h2>
    <button @click="increment">+button>
    <button @click="decrement">-button>
  div>
template>
<script src="../../lib/vue.js">script>
<script>
  // 1.注册组件
  const obj = {
    counter: 0
  }
  /*
  * 为什么data在组件中必须是一个函数呢?
  * 1. 首先，如果不是一个函数，Vue直接就会报错。
  * 2. 其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。
  * */
  Vue.component('cpn', {
    template: '#cpn',
    // data() {
    //   return {
    //     counter: 0
    //   }
    // },
    data() {
      return obj
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
script>

<script>
  // const obj = {
  //   name: 'why',
  //   age: 18
  // }
  //
  // function abc() {
  //   return obj
  // }
  //
  // let obj1 = abc()
  // let obj2 = abc()
  // let obj3 = abc()
  //
  // obj1.name = 'kobe'
  // console.log(obj2);
  // console.log(obj3);


script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82

    在这里插入图片描述

    8. 08-组件通信-父组件向子组件传递数据.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08-组件通信-父组件向子组件传递数据title>
head>
<body>

<div id="app">
  <h1>正确写法, 使用第一种 props写法: 使用 v-bind 进行传值h1>
  <cpn v-bind:cmessage="message" :cmovies="movies">cpn>
  
  <h1>如果不加 v-bind, 下面这个会将 message、movies 作为 字符串传递给 cmessage、movies 属性h1>
  <cpn cmessage="message" cmovies="movies" >cpn>
  
  <h1>正确写法, 使用第二种 props写法, cmessage 没传值, 使用的是默认值h1>
  <cpn v-bind:cmovies="movies">cpn>

div>



<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}li>
    ul>
    <h2>{{cmessage}}h2>
  div>
template>

<script src="../../lib/vue.js">script>
<script>
  // 父传子: props: properties
  const cpn = {
    template: '#cpn',
    // 第一种写法
    // props: ['cmovies', 'cmessage'],
    // 第二种写法
    props: {
      // 1.类型限制
      // cmovies: Array,
      // cmessage: String,

      // 2.提供一些默认值, 以及必传值
      cmessage: {
        type: String,
        default: 'aaaaaaaa',
        required: true  // 为true时，必须要传，不传则报错
      },
      // 类型是对象或者数组时, 默认值必须是一个函数
      cmovies: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {}
    },
    methods: {

    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      movies: ['海王', '海贼王', '海尔兄弟']
    },
    components: {
      cpn
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80

    在这里插入图片描述

    9. 09-组件通信-父传子(props中的驼峰标识).html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>09-组件通信-父传子(props中的驼峰标识)title>
head>
<body>

<div id="app">
  <cpn :c-info="info" :child-my-message="message" >cpn>
div>

<template id="cpn">
  <div>
    <h2>{{cInfo}}h2>
    <h2>{{childMyMessage}}h2>
  div>
template>

<script src="../../lib/vue.js">script>
<script>
  const cpn = {
    template: '#cpn',
    props: {
      cInfo: {
        type: Object,
        default() {
          return {}
        }
      },
      childMyMessage: {
        type: String,
        default: ''
      }
    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: 'why',
        age: 18,
        height: 1.88
      },
      message: 'aaaaaa'
    },
    components: {
      cpn
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    在这里插入图片描述

    10. 10-组件通信-子传父(自定义事件).html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>10-组件通信-子传父(自定义事件)title>
head>
<body>


<div id="app">
  
  <cpn @item-click="cpnClick">cpn>
div>


<template id="cpn">
  <div>
    <button v-for="item in categories"
            @click="btnClick(item)">
      {{item.name}}
    button>
  div>
template>

<script src="../../lib/vue.js">script>
<script>

  /*
  * 1.子组件
  * */
  const cpn = {
    template: '#cpn',
    data() {
      return {
        categories: [
          {id: 'aaa', name: '热门推荐'},
          {id: 'bbb', name: '手机数码'},
          {id: 'ccc', name: '家用家电'},
          {id: 'ddd', name: '电脑办公'},
        ]
      }
    },
    methods: {
      btnClick(item) {
        console.log(item);
        // 发射事件: 自定义事件, item:为参数， item-click:事件名称
        this.$emit('item-click', item)
      }
    }
  }

  /*
  * 2.父组件
  * */
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn
    },
    methods: {
      cpnClick(item) {
        console.log('cpnClick', item);
      }
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72

    在这里插入图片描述

    11. 11-组件通信-父子组件通信案例(props实现).html

    

    • 1

    在这里插入图片描述

    12. 12-组件通信-父子组件通信案例(watch实现).html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>12-组件通信-父子组件通信案例(watch实现)title>
head>
<body>

<div id="app">
  <cpn :number1="num1"
       :number2="num2"
       @num1change="num1change"
       @num2change="num2change"/>
div>

<template id="cpn">
  <div>
    <h2>props:{{number1}}h2>
    <h2>data:{{dnumber1}}h2>
    <input type="text" v-model="dnumber1">
    <h2>props:{{number2}}h2>
    <h2>data:{{dnumber2}}h2>
    <input type="text" v-model="dnumber2">
  div>
template>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      num1: 1,
      num2: 0
    },
    methods: {
      num1change(value) {
        this.num1 = parseFloat(value)
      },
      num2change(value) {
        this.num2 = parseFloat(value)
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        props: {
          number1: Number,
          number2: Number,
          name: ''
        },
        data() {
          return {
            dnumber1: this.number1,
            dnumber2: this.number2
          }
        },
        watch: {
          dnumber1(newValue) {
            this.dnumber2 = newValue * 100;
            this.$emit('num1change', newValue);
          },
          dnumber2(newValue) {
            this.number1 = newValue / 100;
            this.$emit('num2change', newValue);
          }
        }
      }
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73

    13. 13-组件访问-父访问子-$children-$refs.html

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>13-组件访问-父访问子-children-refstitle>
head>

<body>

  <div id="app">
    <cpn>cpn>
    <cpn ref="aaa">cpn>
    <button @click="btnClink">按钮button>
  div>

  <template id="cpn">
    <div>
      <span>我是一个演员span>
    div>
  template>

  <script src="../../lib/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {},
      methods: {
        btnClink() {
          // 父组件  访问 子组件

          /*
          * 1. $children
          * */
          console.log('this:', this)
          console.log('this.$children:', this.$children)
          console.log('-------------------')
          this.$children[0].showMessage();
          for (let c of this.$children) {
            console.log('c.name: ', c.name)
            c.showMessage()
          }
          this.$children[1].name; // 这样可以指定某个组件对象，但是不固定，所以这样不好

          /*
          * 2. $ref => 对象类型，默认是一个空的对象 ref='bbb
          * */
          console.log(this.$refs.aaa.name)
        }
      },
      components: {
        cpn: {
          template: '#cpn',
          props: {},
          data() {
            return {
              name: '我是子组件的 name'
            }
          },
          methods: {
            showMessage() {
              console.log('子组件方法-showMessage');
            }
          }
        }
      }
    })
  script>

body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72

    在这里插入图片描述

    14. 14-组件访问-子访问父-$parent-$root.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>14-组件访问-子访问父-parent-roottitle>
head>
<body>

<div id="app">
  <cpn>cpn>
div>

<template id="cpn">
  <div>
    <h2>我是cpn组件h2>
    <ccpn>ccpn>
  div>
template>

<template id="ccpn">
  <div>
    <h2>我是ccpn组件h2>
    <button @click="btnClick">按钮button>
  div>
template>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn',
        data(){
          return {
            name: '我是ccpn组件的 name'
          }
        },
        methods: {
          btnClink(){
            console.log('btnClink');
          }
        },
        components: {
          ccpn: {
            template: '#ccpn',
            methods: {
              btnClick(){
                // 1. 访问父组件 $parent
                console.log('this.$parent: ', this.$parent);
                console.log('this.$parent.name: ', this.$parent.name);
                console.log('------------------------');
                
                
                // 2. 访问根组件$root
                console.log('this: ', this);
                console.log('this.$root: ', this.$root);
                console.log('this.$root.message: ', this.$root.message);
              }
            }
          }
        }
      }
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72

    在这里插入图片描述

    三、03-组件化高级

    1. 01-slot-插槽的基本使用.html

    1. 插槽的基本使用
    2. 插槽的默认值 button
      3.如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素
    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-slot-插槽的基本使用title>
head>
<body>



<div id="app">
  <cpn>cpn>
  <hr>
  
  <cpn><span>我是传过来的：哈哈哈span>cpn>
  <hr>
  
  <cpn><i>我是传过来的：呵呵呵i>cpn>
  <hr>
  
  <cpn>
    <i>我是传过来的：呵呵呵i>
    <div>div元素div>
    <p>p元素p>
  cpn>
  <hr>
div>


<template id="cpn">
  <div>
    <h2>我是组件h2>
    <p>我是组件, 哈哈哈p>
    <slot><button>按钮button>slot>
    
  div>
template>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59

    在这里插入图片描述

    2. 02-slot-具名插槽的使用.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-slot-具名插槽的使用title>
head>
<body>

<div id="app">
  <cpn><span slot="center">centerspan>cpn>
  <hr>
  <cpn><button slot="left">leftbutton>cpn>
div>


<template id="cpn">
  <div>
    <slot name="left"><span>左边span>slot>
    <slot name="center"><span>中间span>slot>
    <slot name="right"><span>右边span>slot>
  div>
template>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    在这里插入图片描述

    3. 03-什么是编译的作用域.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-什么是编译的作用域title>
head>
<body>


<div id="app">
  <cpn v-show="isShow">cpn>
  <hr>
  <cpn v-for="item in names">cpn>
div>


<template id="cpn">
  <div>
    <h2>我是子组件h2>
    <p>我是内容, 哈哈哈p>
    <button v-show="isShow">按钮button>
  div>
template>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: true
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            isShow: false,
            names: [1, 2, 3, 4]
          }
        }
      },
    }
  })
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    4. 04-作用域插槽的案例.html

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-作用域插槽的案例title>
head>
<body>

<div id="app">
  <cpn>cpn>

  <cpn>
    
     <template slot-scope="slot">
      {item}}-->
       
      <span>{{slot.data.join(' - ')}}span>
    template>
  cpn>

  <cpn>
    
    <template slot-scope="slot">
      {item}} * -->
      <span>{{slot.data.join(' * ')}}span>
    template>
  cpn>
  
div>

<template id="cpn">
  <div>
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}li>
      ul>
    slot>
  div>
template>

<script src="../../lib/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
          }
        }
      }
    }
  })
script>


body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66

    在这里插入图片描述

  • 相关阅读:
    PowerDotNet平台化软件架构设计与实现系列（13）：应用监控平台
    Oracle 21版Database In-Memory LivaLabs实验（上）
    加密市场的投资布局，Zebec实属价值洼地
    抗疫逆行者网页作业 感动人物HTML网页代码成品 网页作业带JS下拉菜单 最美逆行者网页模板 致敬疫情感动人物网页设计制作
    Mac下cmake使用Android编译
    Boot 连接 Impala数据库
    [数据结构与算法] 线性表之数组详解
    Docker拉取nginx镜像，部署若依Vue前端
    年耗资百万数据库升级记录
    如何编写一个 Pulsar Broker Interceptor 插件
  • 原文地址：https://blog.csdn.net/qq_40036754/article/details/126106680