Vue进阶

浓黑的悲凉

已于 2022-03-14 15:14:21 修改

阅读量262

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-02-15 10:23:52 首次发布

本文链接：https://blog.csdn.net/weixin_45747546/article/details/122937753

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue组件化

局部注册与全局注册

组件的使用分为三个步骤：

创建组件构造器：调用Vue.extend( )方法
注册组件：调用Vue.component( )方法
使用组件：在Vue实例的作用范围内使用组件

全局注册

<body>
  <div id="app">
<!--      3.使用组件-->
    <my-cpn-c></my-cpn-c>
    <my-cpn-c></my-cpn-c>
    <my-cpn-c></my-cpn-c>
  </div>
  <script type="text/javascript" src="../js/vue.js"></script>
  <script>
    //1.创建组件构造器对象
    const cpnC = Vue.extend({
      template: `
        <div>
            <h2>翻滚吧！</h2>
            <h3>憨八龟</h3>
        </div>
`
    })
    //2.注册组件（全局注册）
    Vue.component('my-cpn-c',cpnC)

    new Vue({
      el: '#app'
    })
  </script>
</body>

局部注册

<body>
  <div id="app">
<!--      3.使用组件-->
      <cpn></cpn>
      <cpn></cpn>
      <cpn></cpn>
  </div>
  <script type="text/javascript" src="../js/vue.js"></script>
  <script>
    //1.创建组件构造器对象
    const cpnC = Vue.extend({
      template: `
        <div>
            <h2>翻滚吧！</h2>
            <h3>憨八龟</h3>
        </div>
`
    })
    new Vue({
      el: '#app',
        components:{
          cpn: cpnC //2.注册组件，（局部注册）
        }
    })
  </script>
</body>

父组件与子组件

<body>
  <script type="text/javascript" src="../js/vue.js"></script>
  <div id="app">
    <father></father>
    <father></father>
    <father></father>
  </div>
  <script>
    const son = Vue.extend({
      template:`
        <h3>我是儿子</h3>
      `
    })
    const father = Vue.extend({
      template:`
        <div>
            <h1>我是爸爸</h1>
            <son></son>
        </div>
      `,
      components:{
        son: son
      }
    })
    new Vue({
      el: '#app',
      components:{
        father:father
      }
    })
  </script>
</body>

注意子组件在父组件之前定义，否则可能会出现找不到情况

组件注册的语法糖

省略 Vue.extend( )步骤

局部注册

<body>
  <div id="app">
    <cpn01></cpn01>
  </div>
  <script type="text/javascript" src="../js/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      components:{
        cpn01:{
          template: `
          <div>
            <h1>我是一个小小的组件</h1>
            <h2>我木的感情</h2>
          </div>
          `
        }
      }
    })
  </script>
</body>

全局注册

组件模板抽离方法

<body>
  <script type="text/javascript" src="../js/vue.js"></script>
<!--  方式一-->
    <script type="text/x-template" id="cpn01">
        <div>
            <h1>你可给我滚吧！</h1>
        </div>
    </script>
<!--  方式二-->
    <template id="cpn02">
        <div>
            <h1>你滚蛋！</h1>
        </div>
    </template>
    <div id="app">
        <cpn01></cpn01>
        <cpn02></cpn02>
    </div>
    <script>
        Vue.component('cpn01',{
            template:'#cpn01'
        })
        Vue.component('cpn02',{
            template:'#cpn02'
        })
        new Vue({
            el:'#app'
        })
    </script>
</body>

组件数据

组件是一个单独功能模块的封装，这个模块有属于自己的HTML模板，也应该有属性自己的数据data：组件不能直接访问Vue实例中的data

如果能直接访问，数据都放在Vue实例的data中，就会变得十分臃肿

Vue组件有自己保存数据的地方

<body>
  <script type="text/javascript" src="../js/vue.js"></script>
  <div id="app">
    <e1></e1>
  </div>
  <script>
    Vue.component('e1',{
      template:`
      <div><h1>{{msg}}</h1></div>
      `,
      data() {
        return {
          msg:'变身！迪迦！'
        };
      }
    })
    new Vue({
      el:'#app'
    })
  </script>
</body>

在注册组件时为组件注册数据

父子组件之间的通信

父传子：通过props向子组件传递数据
子传父：通过事件向父组件发送消息

父传子

<body>
  <script type="text/javascript" src="../js/vue.js"></script>
  <div id="app">
      <cpn :cname="name" :cgender="gender"></cpn>
  </div>
  <template id="test" >
      <div>
          <h1>{{cname}}</h1>
      </div>
  </template>
  <script>
    const cpn = Vue.extend({
      template:'#test',
        //1.第一种方式
        // props:['cname','cgender'],
        props:{
          //2.第二种方式:指定类型
          // cname:String,
          //   cgender:String
            //3.第三种方式：指定默认值
            cname:{
                type:String,         //类型
                default:'默认是大佬',  //指定默认值
                required:true        //变量必传
            }
            //4.还有一些其他写法，不过多赘述......
        }
    })
    new Vue({
      el:'#app',
      data:{
          name:'关云长',
          gender:'男'
      },
      components:{
        cpn:cpn
      }
    })
  </script>
</body>

props支持的默认数据类型有以下几种：，也可以自定义类型

<cpn id = "cpn" :c-name="name"></cpn>

注意使用组件时，如果props变量名设为驼峰式，这里要做一下驼峰转化例如：cName ==> c-name

子传父

<body>
    <script type="text/javascript" src="../js/vue.js"></script>
    <div id="app">
        <cpn @item-click="fatherClick"></cpn>
    </div>
    <template id="cpn">
        <div>
            <li v-for="(item,index) in list">
                <button @click="btnClick(item)">{{item}}</button>
            </li>
        </div>
    </template>
    <script>
        const cpn = Vue.extend({
            template: "#cpn",
            methods:{
                btnClick(item){
                    this.$emit('item-click',item)
                }
            },
            data(){
                return{
                    list:['蜻蜓队长','铁甲小宝','金龟太郎']
                }
            }
        })
        new Vue({
            el:"#app",
            components:{
                cpn:cpn
            },
            methods: {
                fatherClick(temp){
                    alert('父组件说：'+temp)
                }
            }
        })
    </script>
</body>

插槽solt

组件的插槽是为了让我们封装的组件更加具有扩展性
让使用者可以决定组件内部的一些内容到底展示什么

在vue-cli项目中使用插槽slot

默认插槽

…

runtime-compiler与runtime-only的区别

vue程序运行过程

template——>ast(抽象语法树)——>render函数——>virtual dom(虚拟dom)——>UI(真实dom)

runtime-only 1.性能更高 2.代码量更少

Webpack打包工具

安装：

npm install webpack@3.6.0 -g

查看版本：

webpack --version

打包

webpack /src/main.js /dist/bundle.js

创建配置文件 webpack.config.js

module.exports = {
    entry:'./src/main.js',
    output:{
        path:'E:\\soft\\webStom\\workspace\\VueTest-Plus\\webpack的使用\\dist',
        filename:'bundle.js'
    }
}

局部安装

cd 进入对应目录,执行命令

npm install webpack@3.6.0 --save-dev

局部安装的目的是：项目发布后，别人拉取下来，可以使用局部安装的webpack 进行打包，不会因为webpack版本不一造成打包失败的情况

使用局部webpack打包方式：

package.json中定义自定义脚本

"scripts": {
    "build": "webpack"
  }

然后使用npm run build命令打包，注意直接使用webpack打包的话，默认是使用全局的webpack
pace\VueTest-Plus\webpack的使用\dist’,
filename:‘bundle.js’
}
}


局部安装

cd 进入对应目录,执行命令

npm install webpack@3.6.0 --save-dev


局部安装的目的是：项目发布后，别人拉取下来，可以使用局部安装的webpack 进行打包，不会因为webpack版本不一造成打包失败的情况

使用局部webpack打包方式：

package.json中定义自定义脚本

```js
"scripts": {
    "build": "webpack"
  }

然后使用npm run build命令打包，注意直接使用webpack打包的话，默认是使用全局的webpack

本科计算机bi-ye-she-ji辅导，远程安装运行+部署，欢迎各位小伙伴打扰~企鹅号：298-150-5753

浓黑的悲凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue进阶

Vue组件化局部注册与全局注册组件的使用分为三个步骤：创建组件构造器：调用Vue.extend( )方法注册组件：调用Vue.component( )方法使用组件：在Vue实例的作用范围内使用组件全局注册<body> <div id="app"> <my-cpn-c></my-cpn-c> <my-cpn-c></my-cpn-c> &l
复制链接

扫一扫