1218 组件分类,组件传参

Posted fwzzz

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了1218 组件分类,组件传参相关的知识，希望对你有一定的参考价值。

目录

昨日内容

"""
1、表单指令：
    v-model="变量"   变量与value有关
    普通：变量就代表value值
    单选框：变量为多个单选框中的某一个value值
    单一复选框：变量为布尔，代表是否选中
    多复选框：变量为数组，存放选中的选项value
    
    
2、条件指令：
    v-show:  display:none
    v-if:    不渲染
    v-if | v-else-if | v-else
    前者条件成立，就不管之后分支，当所有条件都不成功，才执行v-else分支
    
3、循环指令：
    v-for="(v, i) in str|arr"   
    v-for="(v, k, i) in dic"
    v:值 k:键 i:索引

4、sessionStorage | localStorage
    sessionStorage：生命周期同所属标签(标签关闭被销毁)
    localStorage：永久保存
    localStorage.key = value
    localStorage.clear()

5、分隔符：delimiters: ['[{', '}]'],

6、过滤器：
    {{ n1, n2 | f1(30) | f2 }}
    
    filters: {
        f1(n1,n2,n3) {return 过滤结果},
        f2(f1的res) {return 过滤结果},
    }

7、计算属性：
    result必须渲染；绑定的方法内部出现的变量更新方法被调用；方法返回值是result的值；result不能在data中重复定义
    computed: {
        result() {
            // 一个方法属性值依赖于多个变量
            return this.n1 + this.n2;
        }
    }

8、监听属性：
    监听属性属性更新方法被调用；方法参数为被监听属性当前值，上一次值；多个变量依赖一个变量
    watch: {
        full_name(n, o) {
            this.first_name = n.split('')[0]
            this.last_name = n.split('')[1]
        }
    }
    
9、冒泡排序：
    for (let i=0; i<arr.length-1; i++) {  // 趟数
        for (let j=0; j<arr.length-1-i; j++) {  // 比较次数
            // 处理条件即可
            if (arr[j]参数 > stus[j + 1]参数) {
                let temp = stus[j];
                stus[j] = stus[j + 1];
                stus[j + 1] = temp;
            }
        }
    }
"""

组件

1.概念

html,css与js的集合体,为该集合体命名,用该名字复用html,css与js组成的集合体 ==> 复用性

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

技术图片

2.组件分类

  • 根组件 new Vue() 生成的组件
  • 局部组件 组件名 = {} , { } 内部采用的是vue语法
  • 全局组件 vue.component(‘组件名‘,{}), { }内部采用的是vue语法

特点

  1. 组件都有管理组件html页面结果的 template 实例成员, template 中有且只有一个根标签

  2. 根组件都是作为最顶层父组件,局部与全局组件作为子组件,也可以成为其他局部与全局组件的父组件

  3. 子组件的数据需要隔离(数据组件化,每一个组件拥有自己数据的独立名称空间)

  4. 局部组件必须注册后才能使用,全局组件不需要注册(使用局部变量省内存)

  5. 组件中出现的所有变量(模板中,逻辑中),都由该组件自己提供管理

  6. 局部,全局和根组件都是一个vue实例,一个实例对相应一套html,css,js结构,所以实例就是组件

根组件

挂载点el本质是被组件template模块进行替换的占位符

  • 根组件,可以不确定template,template默认采用挂载点页面结构
  • 如果设置的template,挂载点内部的内容无效,因为会被替换掉
  • html,body标签不能被替换,所以不能作为挂载点
使用new Vue来定义根组件
在template 中定义文本

<script>
    new Vue({
        el:'#app',
        data:{
            msg:'组件信息'
        },
        template:'<p>你好{{ msg }}</p>'
    })
</script>

局部组件

局部组件要在其父组件中注册才能使用

  • 声明组件 template
  • 注册组件 components
  • 渲染组件 直接在页面中写
<div id="app">
    <div class="warp">
        <zujian></zujian>
    </div>
</div>
<script>
    
// 声明局部组件
    // 1.声明组件 2.注册组件 3. 渲染组件
    let zujian = {
        template:`
        <div class="box">
            <img src="img/1.jpg" alt="">
            <h2>美女</h2>
        </div>
        `
    };

    new Vue({
        el:'#app',
        data:{},
// 注册组件
        components:{
            // 组件注册时,可以直接写组件名
            zujian
        }
    })
</script>
解耦合

components 注册(注册是小写)
    对应使用-来替换驼峰体的变量

全局组件

  • Vue.component(‘组件名‘,{"语法组件"})
  • 使用template定义语法组件
  • 全局组件不需要注册
// 全局组件
        <quanju></quanju>

    Vue.component('quanju',{
        template:`
        <div class="box">
            <img src="img/2.jpg" alt="">
            <h2>美女</h2>
        </div>
        `
    });

3.组件传参

组件数据的局部化

  • 函数产生局部作用域,进行组件化data(){}
  • 一个组件可能会被复用多次,每个组件都有应该有自己独立的变量名称空间
  • 数据需要组件化,作为方法的返回值(方法执行后会产生一个局部作用域)
    // 声明局部组件
    // 绑定了点击事件
    let zujian = {
        template:`
        <div class="box" @click="fn">
            <img src="img/1.jpg" alt="">
            <h2>锤了美女{{ count }}下</h2>
        </div>
        `,
        // 函数产生局部作用域,进行组件化
        // 一个组件可能会被复用多次,每个组件都有应该有自己独立的变量名称空间
        data(){
            return{
                count:0,
            }
    },
        // 数据需要组件化,作为方法的返回值(方法执行后会产生一个局部作用域)
        methods:{
            fn(){
                this.count++;
            }
        }
    };

父传子

  • 传值时,自定义属性前加:是变量,不加直接传值
  • 子组件可以通过props自定义组件属性(采用反射机制,需要填写字符串,但是使用时可以直接当做变量)
  • 子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,可以将变量值传递给子组件
传值
    // 加":"传变量  :abc="m" 传变量m ,  xyz="123"传的普通字符串

    <zujian v-for="m in meinv" :abc="m" xyz="123"></zujian>

取值
     let zujian = {
     // 接收变量
        props:['abc','xyz'],
        
        template:`
        <div class="box" @click="fn">
            <img :src="abc.img" alt="">
            <h2>锤了{{ abc.name }}{{ count }}下</h2>
            <!--<h3>{{ abc }}</h3>    必须是 :src,才能接收变量-->
        </div>
        `,

子传父

利用自定义方法来获取子组件的数据,this.$emit(‘自定义事件名‘,触发事件回调的参数们)

自定义组件标签的事件

  • 事件是属于子组件的,子组件在父组件中渲染并绑定事件方法,所以事件方法来由父组件实现

  • 子组件如何触发自定义事件:
    this.$emit(‘自定义事件名‘,触发事件回调的参数们)

  • 子组件触发自定义事件,携带出子组件的内容,在父组件中实现 自定义事件的方法,拿到子组件传递给父组件的信息

  • 触发自定义事件在自组件内部完成,触发自定义绑定方法是在父组件实现,在触发的过程中,将子组件参数带出来,父组件中完成逻辑
    <!--点击提交按钮进行修改标题-->
    <tag @action="actionfn"></tag>
    
    
    methods:{
            changetitle(){
                if (this.t1 && this.t2){
                    // 触发父事件 $emit('事件名',携带的参数)
                    this.$emit('action',this.t1,this.t2);
                    this.t1 = '';
                    this.t2 = '';
                }

代码实现标题的改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子传父</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="app">

    <h1>{{ h1 }}</h1>
    <h2>{{ h2 }}</h2>
    <!--点击提交按钮进行修改标题-->
    <tag @action="actionfn"></tag>
    <br>
    <hr>
    <br>
    <!--随时修改自动跟随标题-->
    <tag2 @h1a="afn1" @h2a="afn2"></tag2>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
    let tag={
        template:`
                <div>
                    <input type="text" v-model="t1">
                    <input type="text" v-model="t2">
                    <button @click="changetitle"> 修改标题 </button>
                </div>
        `,
        data(){
            return {
                t1:'',
                t2:'',
            }
        },
        methods:{
            changetitle(){
                if (this.t1 && this.t2){
                    // 触发父事件 $emit('事件名',携带的参数)
                    this.$emit('action',this.t1,this.t2);
                    this.t1 = '';
                    this.t2 = '';
                }
            }
        }
    };

    let tag2={
        template:`
                <div>
                    修改主标题:<input type="text" v-model="t1" @input="t1fn">
                    修改副标题:<input type="text" v-model="t2" @input="t2fn">
                </div>
        `,
        data(){
            return {
                t1:'',
                t2:'',
            }
        },
        methods:{
            // 使用子传父的实现
            t1fn(){
                this.$emit('h1a',this.t1)
            },
        },
            // 利用监听来改变
        watch:{
            t2(){
                this.$emit('h2a',this.t2)
            }
        }
    };

// 父组件
    new Vue({
        el:'#app',
        data:{
            h1:'主标题',
            h2:'副标题',
        },
        components:{
            tag,
            tag2
        },
        methods:{
            actionfn(a,b){
                this.h1 =a;
                this.h2 =b;
            },
            afn1(a){
                if (!a){
                    this.h1='主标题';
                    this.h2='子标题';
                    return;
                }
                this.h1=a;
            },
            afn2(a){
                if (!a){
                    this.h1='主标题';
                    this.h2='子标题';
                    return;
                }
                this.h2=a;
            }
        }
    })
</script>
</html>

作业

"""
1、按照上方 知识点总结 模块，总结今天所学知识点；
2、有以下广告数据（实际数据命名可以略做调整）
ad_data = {
    tv: [
        {img: 'img/tv/001.png', title: 'tv1'},
        {img: 'img/tv/002.png', title: 'tv2'},
        {img: 'img/tv/003.png', title: 'tv3'},
        {img: 'img/tv/004.png', title: 'tv4'},
    ],
    phone: [
        {img: 'img/phone/001.png', title: 'phone1'},
        {img: 'img/phone/002.png', title: 'phone2'},
        {img: 'img/phone/003.png', title: 'phone3'},
        {img: 'img/phone/004.png', title: 'phone4'},
    ]
}

i) 有两个大标题，电视和手机，点击对应的标题，渲染对应的数据
ii) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）

3、在第2题基础上，页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）
i）当没有点击任何广告，h2 标签显示：未选中任何广告
ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中
"""

Vue项目环境的搭建

Vue项目环境搭建

"""
node ~~ python：node是用c++编写用来运行js代码的
npm(cnpm) ~~ pip：npm是一个终端应用商城，可以换国内源cnpm
vue ~~ django：vue是用来搭建vue前端项目的

1) 安装node
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

2) 换源安装cnpm
>: npm install -g cnpm --registry=https://registry.npm.taobao.org

3) 安装vue项目脚手架
>: cnpm install -g @vue/cli

注：2或3终端安装失败时，可以清空 npm缓存 再重复执行失败的步骤
npm cache clean --force
"""

Vue项目创建

1) 进入存放项目的目录
>: cd ***

2) 创建项目
>: vue create 项目名

3) 项目初始化

技术图片

pycharm配置并启动vue项目

1) 用pycharm打开vue项目
2) 添加配置npm启动

技术图片

vue项目目录结构分析

├── v-proj
|   ├── node_modules    // 当前项目所有依赖，一般不可以移植给其他电脑环境
|   ├── public          
|   |   ├── favicon.ico // 标签图标
|   |   └── index.html  // 当前项目唯一的页面
|   ├── src
|   |   ├── assets      // 静态资源img、css、js
|   |   ├── components  // 小组件
|   |   ├── views       // 页面组件
|   |   ├── App.vue     // 根组件
|   |   ├── main.js     // 全局脚本文件（项目的入口）
|   |   ├── router
|   |   |   └── index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
|   |   └── store   
|   |   |   └── index.js// 仓库脚本文件（vuex插件的配置文件，数据仓库）
|   ├── README.md
└   └── package.json等配置文件

vue组件(.vue文件)

# 1) template：有且只有一个根标签
# 2) script：必须将组件对象导出 export default {}
# 3) style: style标签明确scoped属性，代表该样式只在组件内部起作用(样式的组件化)
<template>
    <div class="test">
        
    </div>
</template>

<script>
    export default {
        name: "Test"
    }
</script>

<style scoped>

</style>

全局脚本文件main.js（项目入口）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

改写

import Vue from 'vue'  // 加载vue环境
import App from './App.vue'  // 加载根组件
import router from './router'  // 加载路由环境
import store from './store'  // 加载数据仓库环境

Vue.config.productionTip = false
new Vue({
    el: '#app',
    router,
    store,
    render: function (readFn) {
        return readFn(App);
    },
});

Vue基础总结

"""
组件：
    组件概念：vue实例就是组件
    根组件、局部组件、全局组件
    组件传参：
        父传子：自定义组件属性
        子传父：自定义组件事件
    
实例成员：
    el、data、methods、computed、watch、filters、delimiters、props、template、components

指令：
    {{}}、v-text、v-html、v-once、v-on、v-model、v-bind、v-if、v-show、v-else-if、v-else、v-for、v-cloak
"""

以上是关于1218 组件分类,组件传参的主要内容，如果未能解决你的问题，请参考以下文章

vue组件

Vue 03

第八篇：Vue组件传参

Vue 教程(二十)父组件传参子组件

Vue 教程(二十一)子组件传参父组件

vue非父子组件间传参问题