1.计算属性如何使用

一般我们在写vue的时候,在模板内写的表达式非常便利,它运用于简单的运算,但是他也有一些复杂的逻辑,包括运算、函数调用等,那么就用到了计算属性,他依赖于data中数据变化的  data 中数据变化的时候    计算属性就会重新执行,视图也会更新。


    2.计算属性的 set get 如何使用

    每一个计算属性都包含一个getter 和一个setter ;绝大多数情况下,我们只会用默认的getter 方法来读取一个计算属性,在业务中很少用到setter,所以在声明一个计算属性时,可以直接使用默认的写法,不必将getter 和setter 都声明。但在你需要时,也可以提供一个setter 函数, 当手动修改计算属性的值就像修改一个普通数据那样时,就会触发setter 函数,


      3.watch 如何使用

      之前做一个H5的项目。需求是当用户在输入完了手机号和验证码之后,登录按钮才可以点击。 在没有使用vue之前,我们可能是通过input的change事件来判断,用户是否输入了内容,然后修改按钮的状态。现在有了vue,就省事了很多,我们只需要在watch中,监听数据模型的值改变即可。在input 上绑定一个v-mode="pass"绑定一个数据名, 在data里写入绑定的事件名,通过watch来监听输入内容的改变,但是如果,监听的是一个对象 里面有一个deep属性可以在选项参数中指定deep:true.也叫深度监听  <input v-model="passw2" placeholder="请再次输入密码" />


        4.计算属性和watch的区别

        在我们运用vue的时候一定少不了用计算属性computed和watch computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。 watch监听的是你定义的变量,当你定义的变量的值发生变化时,调用对应的方法。就好在div写一个表达式name,data里写入num和lastname,firstname,在watch里当num的值发生变化时,就会调用num的方法,方法里面的形参对应的是num的新值和旧值,而计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。


          5.prop 验证,和默认值

          我们在父组件给子组件传值得时候,为了避免不必要的错误,可以给prop的值进行类型设定,让父组件给子组件传值得时候,更加准确,prop可以传一个数字,一个布尔值,一个数组,一个对象,以及一个对象的所有属性。组件可以为 props 指定验证要求。如果未指定验证要求,Vue 会发出警告比如传一个number类型的数据,用defalt设置它的默认值,如果验证失败的话就会发出警告。


          • 用户: 百斯特 时间: 2019-05-23 20:41

            default默认值

          6.prop 如何传一个对象的所有属性

          方法一:使用不带参数的v-bind写法v-bind中没有参数,而组件中的props需要声明对象的每个属性
          方法二:使用带参数的v-bind写法v-bind后跟随参数todo,组件中的props需要声明该参数,也就是v-bind后跟随参数todo,组件就可以通过todo来访问对象的属性


            7.插槽,具名插槽,插槽默认内容

            单个插槽;在父组件写一个标签,在子组件通过slot来接受标签里的内容,他只能用一个slot。单个插槽可以放置在组件的任意位置,但是就像它的名字一样,一个组件中只能有一个该类插槽。具名插槽:在父组件标签写入slot,子组件里面写name名字,他们两个名字要相对应,才能通过名字在找到对应的位置。相对应的,具名插槽就可以有很多个,只要名字(name属性)不同就可以了。


              8.作用域插槽

              举个例子,比如我写了一个可以实现条纹相间的列表组件,发布后,使用者可以自定义每一行的内容或样式(普通的slot就可以完成这个工作)。而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数,子组件与父组件的数据动态交互的一种常见案例父组件中必须要有template元素,且必须有scope特性,scope特性中是临时变量名, 接收从子组件中传递上来的属性,属性可以是任意定义的。


                9.动态组件

                在我们平时使用vue中的模板的时候,许多时候都是直接定义成一个固定的模板,但是,vue中提供了一个动态模板,可以在任意模板中切换,就是用vue中<component>用:is来挂载不同的组件。我们在components中注册了三个模板,当我们点击当前按钮的时候,就会将模板切换模板,可以说是非常方便了。如果要把组件切换过程中的将状态保留在内存中,可以添加一个 keep-alive 指令参数,防止重复渲染DOM。动态组件上使用keep-alive<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。


                  10.子组件访问父组件实例子 $parent

                  this.$parent在子组件中判断this.$parent获取的实例是不是父组件的实例在子组件中console.log(this.$parent)  打印出this.$parent在父组件中console.log(this)  打印出this看看打印出来的两个实例是不是同一个如果是同一个  就可以在子组件中通过this.$parent.属性名和方法名,来调用父组件中的数据或者方法