五分钟带你玩转vue（二）组件

组件的生命周期

      <template>
      <div>
         <button v-on:click = "clickButton" name = "button" type = "button">按钮</button>
         {{message}}
      </div>
      </template>
      <script>
      export default {
      name: 'ComponentDemo',
      data () {
       return {
         message:"改变之前"
      }
      },
      methods: {
          clickButton(){
           this.message = "改变之后"
          }
      },
      //组件被创建之前
      beforeCreate() {
         console.log("组件被创建之前")
      },
      created() {
         console.log("组件被创建之后")
      },
      beforeMount() {
         console.log("组件被渲染之前")
      },
      mounted() {
         console.log("组件被渲染之后")
      },
      beforeUpdate() {
         console.log("数据改变渲染之前")
      },
      updated() {
         console.log("数据改变渲染之后")
      },
      beforeDestroy() {
         console.log("销毁之前")
      },
      destroyed() {
         console.log("销毁之后")
      }
      }
      </script>
  
 

scoped用法

      <style scoped>  //只在当前组件生效
      </style>
  
 

简单组件使用

      组件
      <template>
      <div>
        我是组件啊
      </div>
      </template>
      <script>
      export default {
      name: 'demoOne',
      el: '#app',
      data () {
       return {
      }
      }
      }
      </script>
      <style scoped>
      </style>
      主页
      <template>
      <div>
        我是主页
       <demoOne/>
      </div>
      </template>
      <script>
      import demoOne from './demoOne.vue'
      export default {
      name: 'HelloWorld',
      el: '#app',
      data () {
       return {
      }
      },
      components:{
        demoOne
      }
      }
      </script>
  
 

父传子

      app.vue
      <template>
       <div id="app">
         <parent/>
       </div>
      </template>
      <script>
      import parent from './components/parent.vue'
      export default {
       name: 'App',
       components:{
         parent
        }
      }
      </script>
      <style>
      </style>
      parent.vue
      <template>
      <div>
       <p>我是父亲</p>
       <son title="你好儿子" v-bind:thing = "thing"/>
      </div>
      </template>
      <script>
      import son from './son.vue'
      export default {
      name: 'parent',
      data () {
       return {
           thing:"给你钱"
      }
      },
      components:{
          son
      }
      }
      </script>
      <style>
      </style>
      son.vue
      <template>
      <div>
        我是儿子
        父亲对我说{{title}}-{{thing}}-{{age}}
      </div>
      </template>
      <script>
      export default {
      name: 'son',
      data () {
       return {
      }
      },
      props:{
         title:String,
         thing:String,
         age: {
           type: Number,
           default: 100
          }
      }
      }
      </script>
      <style scoped>
      </style>
  
 

父传子中 子组件接收时的验证

      props: {
         // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
          propA: Number,
         // 多个可能的类型
          propB: [String, Number],
         // 必填的字符串
          propC: {
           type: String,
            required: true
          },
         // 带有默认值的数字
          propD: {
           type: Number,
           default: 100
          },
         // 带有默认值的对象
          propE: {
           type: Object,
           // 对象或数组默认值必须从一个工厂函数获取
           default: function () {
             return { message: 'hello' }
            }
          },
         // 自定义验证函数
          propF: {
            validator: function (value) {
             // 这个值必须匹配下列字符串中的一个
             return ['success', 'warning', 'danger'].indexOf(value) !== -1
            }
          }
  
 

子传父

      app.vue
      <template>
       <div id="app">
         <parent/>
       </div>
      </template>
      <script>
      import parent from './components/parent.vue'
      export default {
       name: 'App',
       components:{
         parent
        }
      }
      </script>
      <style>
      </style>
      parent.vue
      <template>
      <div>
       <p>我是父亲</p>
       <son v-on:getMessage = "getMsg" title="你好儿子"/>
        儿子跟我说话了{{msg}}
      </div>
      </template>
      <script>
      import son from './son.vue'
      export default {
      name: 'parent',
      data () {
       return {
           msg:null
      }
      },
      components:{
          son
      },
      methods: {
          getMsg(data){
             this.msg = data
          }
      }
      }
      </script>
      <style>
      </style>
      son.vue
      <template>
      <div>
       <button v-on:click = "sendMessage" name = 'button' type = "button">说话</button>
      </div>
      </template>
      <script>
      export default {
      name: 'son',
      data () {
       return {
         message:"你好父亲"
      }
      },
      methods: {
          sendMessage(event){
             this.$emit("getMessage",this.message);
          }
      }
      }
      </script>
      <style scoped>
      </style>
  
 

插槽

如果子组件没有使用插槽，父组件如果需要往子组件中填充模板或者html, 是没法做到的

视图传递

      app.vue
      <template>
       <div id="app">
         <HelloWorld>
               <!-- 依然在父组件中渲染 -->
               <!--普通插槽-->
               <!-- <p>我是父亲你好插槽</p> -->
               <!-- 具名插槽 -->
               <div slot ="demo">
                  <p>aaaa</p>
                  <p>bbbb</p>
                  <p>cccc</p>
               </div>
               <p slot = "demo2">{{message}}</p>
               <!-- 接收儿子传递的 -->
               <p slot = "demo3" slot-scope = "props">{{props.text}}</p>
         </HelloWorld>
       </div>
      </template>
      <script>
      import HelloWorld from './components/HelloWorld.vue'
      export default {
       name: 'App',
       components:{
         HelloWorld
        },
        data () {
       return {
         message:"this is message"
       }
      }
      }
      </script>
      <style>
      </style>
      HelloWorld.vue
      <template>
      <div>
        <!-- 父亲的数据在儿子中显示 -->
        <!-- <slot>普通插槽</slot> -->
        <slot name= "demo">具名插槽1</slot>
        <slot name= "demo2">具名插槽2</slot>
        <!-- 儿子传递给父亲 -->
        <slot name= "demo3" v-bind:text = "message">儿到父</slot>
      </div>
      </template>
      <script>
      import demoOne from './demoOne.vue'
      export default {
      name: 'HelloWorld',
      data () {
       return {
          message:"儿子到父亲"
      }
      },
      components:{
        demoOne
      }
      }
      </script>
  
 

缓存keep-alive

重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

      app.vue
      <template>
       <div id="app">
         <button v-on:click = "clickButton" name = "button" type = "button">切换</button>
         <!-- 可以尝试去掉keep-alive -->
         <keep-alive>
             <!-- 失活的组件将会被缓存！-->
             <component v-bind:is="stutas"></component>
         </keep-alive>
       </div>
      </template>
      <script>
      import HelloWorld from './components/HelloWorld.vue'
      import HelloWorld2 from './components/HelloWorld2.vue'
      export default {
       name: 'App',
       components:{
         HelloWorld,
         HelloWorld2
        },
        data () {
       return {
         stutas:HelloWorld
       }
      },
       methods: {
         clickButton(event){
          if(this.stutas ==HelloWorld){
              this.stutas = HelloWorld2
           }else{
              this.stutas = HelloWorld
           }
         }
      },
      }
      </script>
      <style>
      </style>
      HelloWorld.vue
      <template>
      <div>
           <button v-on:click = "clickButton1" name = "button" type = "button">1组件切换</button>
           {{content}}
      </div>
      </template>
      <script>
      export default {
      name: 'HelloWorld',
      data () {
       return {
         content:"组件1"
          }
      },
      methods:{
        clickButton1(event){
              this.content = "我刚刚点击了"
        }
      }
      }
      </script>
      HelloWorld2.vue
      <template>
      <div>
         HelloWorld2
      </div>
      </template>
      <script>
      export default {
      name: 'HelloWorld2',
      data () {
       return {
      }
      }
      }
      </script>
  
 

来源：https://study.163.com/course/courseLearn.htm?courseId=1004938024#/learn/video?lessonId=1279462156&courseId=1004938024

文章来源: baocl.blog.csdn.net，作者：小黄鸡1992，版权归原作者所有，如需转载，请联系作者。

原文链接：baocl.blog.csdn.net/article/details/103773490