vue 基础学习 第四天

32 组件

• 什么是组件： 用我自己的话理解就是 “可以复用的、易于管理的div”。 => 一个页面需要轮播图，轮播图写成一个组件，如果需要复用在另一个页面载入该组件即可。用 Vue 开发的网页就是由不同的组件组成的。（之前都是写无数个div划分区域，现在写无数个组件然后组装成网页）
• 基础代码

• 定义全局组件 Vue.component('这里对应载入时在html代码中写的标签名', { //这里面写具体定义 })
• 全局组件 必须 在根组件前面声明。
• 定义局部组件，写在根组件的 components 里面。 标签名: { //...定义 }。
• 也可以在根组件前面声明并用变量存储起来，然后直接在 components 中载入该变量即可。
• ES6的语法，如果 json 的 键值对， key的名字和value的名字一样，可以直接写 key ，不写 value 。

33 组件中定义 data 数据

• 代码

• 我们是在外面定义的子组件，然后在根组件的 components 中注册。
• 在注册的时候发现了一个问题： 用ES6语法注册时，我将组件名定义为 "myComponent" ，Vue 解析为 "mycomponent"。没办法注册。
• 在子组件中定义data必须使用 data() { //json对象 } 这样的语法，而不能直接写 data: {}。
• 可以使用 来定义模板。然后再子组件定义中使用模板 template: "#test"

34 父组件给子组件传递参数

• 代码

• 整个过程：（根组件）父组件.data中定义数据，然后在html代码中 子组件的标签上 使用 :xxx="定义的变量" 传递数据。
• 子组件需要声明 props = ['接受的数据xxx', '接受的数据yyy', '接受的数据zzz']
• 如果在html中， 子组件的标签上这么传递数据 xxx="value" ，这样 子组件.props 接受的其实是字符串，而不是父组件data中声明的值。

35 props 数据验证

• 代码

• 如果想对 子组件.props 属性声明并接收的数据进行数据校验的话，需要将 props 写成对象。
• 之后接受数据时用 变量名: { //...相关定义 } 进行接收。
• 在相关定义里，我们可以：
  • type: 指定数据类型，可以使用数组的形式指定多种数据类型,
  • required: true | false 指定是否必须传入该参数
  • default() { //return一个默认值 } 设置默认值
  • validator(value) { //执行相关验证为true通过 } 进行数据验证，为真则通过。 这里发现不通过也会显示数据，但是会在浏览器控制台提醒错误。记得参数里要写一个 value 对应传递进来的数据。

36 通过子组件呼叫父组件实现简单的购物车

• 代码

    
    
        总计：￥ {{ total }} 元
    

• 在父组件挂载钩子程序 mounted() { //调用里面的方法，记得 **this.**function() } 。 “相当于初始化方法” => 当组件载入完的时候就执行。
• 子组件在更改商品数量时，更新父组件中的总价:
  • 第1步： html代码中，在子组件的标签上绑定事件 refresh @refresh="totalPrice" 即子组件调用 refresh() 方法时，就调用的是父组件里的 计算总价 方法。
  • 第2步： 给绑定了商品数量的 input 添加一个失焦事件 @blur 当它改变时，调用子组件的 refresh() 方法
  • 第3步： 子组件的 refresh() 方法被调用时，使用 $this.$emit('refresh') 调用 第1步 上绑定的自定义事件 refresh。
  • 即： 子组件标签上的 @refresh => 事件， @blur="refresh" => 子组件的 methods 中定义的方法。 是 refresh() 方法，通过 this.$emit('事件名') 呼叫了事件。

37 更优写法实现36购物车功能

• 代码

    
    
    
        总计：￥ {{ totalPrice }} 元
    

• 不需要在子组件标签上绑定自定义事件了，只需要 :goods.sync="goods" 来实现：当子组件的变量 goods 发生变化时， 父组件的goods也同步(sync)发生变化。
• 同时不需要再在子、父组件中定义 methods 了。 子组件的 input 中也不需要 @blur 绑定失焦事件了。
• 在父组件中定义 computed 计算属性 computed: { 属性() { //...进行计算 return 结果 } }
• 在 html 代码，总价中载入 计算属性 中定义的 totalPrice 即可。

38 子组件 slot 内容分发

• 代码

    
        
这是标题
        
这是内容
        
        
        
    

• 在子组件中定义 slot
• 在根组件中填充 slot <任意标签 slot="要填充的slot名字">填充的内容
• 利用其他组件在根组件中填充某个组件 <其他组件 slot="要填充的slot名字" 话可以传递属性...>
• 可以反复填充一个slot。

39 scope 的使用

• 代码

• 具体过程： 父组件中定义 data.users 数据，然后在子组件标签上传递给子组件。
• 然后在子组件循环时，使用 来遍历数据
• 并且在遍历时，抛出数据
• 在父组件中，载入子组件的标签内

<子组件>
    

• 总体来说，这个功能不常用。整个逻辑更像是在 html 代码中遍历子组件中的 slot。

40 动态组件

• 代码

     使用 input
     使用 textarea

    

• 我们实现了一个功能：通过勾选不同的单选框，显示不同的表单项（input | textarea）.
• 具体实现是通过一个 div 作为载体, 绑定 id 属性
  .
• 这里的 formType 对应的是我们定义并在根组件的 components 属性中声明的根组件.
• 补充一点疑问: 子组件在 components 声明叫做 myInput, 那么在 html 中载入组件应该使用 载入,而不是 => 因为这样浏览器会解析为全小写的变量名.(之前遇到过这个问题)