Vue学习笔记——组件化开发

视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通
文件仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。

目录：
邂逅Vuejs
Vue基础语法
组件化开发
前端模块化
webpack详解
Vue CLI详解
vue-router
Promise的使用
Vuex详解
网络模块封装
项目实战

组件化开发

认识组件化

组件化是Vue.js中的重要思想，提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。

注册组件

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

①创建组件构造器
②注册组件
③使用组件

image-20210725092428867

反单引号可以自由换行：

a = `asdas
dads`

父组件和子组件

这里，cpn1是子组件，cpn2是父组件

注册组件的语法糖写法

全局组件：

Vue.component('cpn1',{
  template: `
    

      
我是标题1
      
我是内容1
    
  `
})

局部组件：

const app=new Vue({
  el: '#app',
  data: {
    message: '你好啊'
  },
  components: {
    'cpn2': {
      template: `
        

          
我是标题1
          
我是内容1
        
      `
    }
  }
})

组件模板的分离写法

结合双向绑定案例

num = parseInt(value)
num = parseFloat(value)

将数据转成number型

props: {
  number1:Number,
},
data(){
  return{
    dnumber1:this.number1,
  }
},

父组件传过来的值不可更改，必须用data把父组件数据拷贝一次后才能更改。

若想父组件跟着子组件改，用v-model双向绑定的例子。@input="函数"

watch实现

父子组件的访问

父子组件的访问方式$children、$refs (reference 引用)
子访问父 $parent、$root

  
  
  
  按钮

console.log(this.$children);
for(let c of this.$children){
  console.log(c.name);
  c.showMessage();
}

↑用$children，当有好几个子组件的时候，还可以依次访问。但是数组只能用1、2、3来标识，可能会指示不清。可以用$refs

↓在html标签上加上ref="aaa"，相当于key，aaa是给这个子组件取的名字。用$refs访问。

console.log(this.$refs.aaa.name)

实际中，$refs用得多

用$parent，子组件与父组件耦合度太高，复用性低

而this.$root.message 直接访问vue实例

slot的使用

基本使用

  
  哈哈哈
  111

image

因为只有一个插槽，如果写得多了，就全部替换

里的是默认显示

具名插槽

  
    标题
    返回
  

image

编译的作用域

作用域插槽

父组件替换插槽的标签，但是内容由子组件来提供

this.languages.join('-')：用 - 作为字符串间的连接

image