簡(jiǎn)述

根據(jù)這個(gè)視頻學(xué)習(xí)整理以下知識(shí)點(diǎn)：

• 如何定義組件
• 如何使用組件
• 如何傳遞參數(shù)給組件
• 參數(shù)的類型限制
• 只定義限制函數(shù)
• 自定義相應(yīng)的計(jì)算屬性
• 修改傳遞的參數(shù)值

代碼

分兩個(gè)文件，1個(gè)是父組件，一個(gè)是子組件
組件：

<template>
  <div>
    <h3>這是組件內(nèi)容</h3>
    <div>文本類型參數(shù) ： {{text}}</div>
    <div>動(dòng)態(tài)參數(shù)： {{text1}}</div>
    <div>數(shù)字參數(shù)（必須用動(dòng)態(tài)參數(shù)）:{{number}}-{{typeof number}}</div>
    <div>對(duì)象參數(shù): {{obj}}-{{obj.name}}</div>
    <div>數(shù)組參數(shù): {{arr.join('-')}}</div>
    <hr />
    <h3>修改屬性的值</h3>
    <button @click="change">修改</button>
    <div>文本類型參數(shù) ： {{txt}}</div>
    <div>計(jì)算屬性: {{num}}</div>
    <hr>
    <h3>限制傳入屬性</h3>
    <div>type:限制傳入類型</div>
    <div>default:默認(rèn)的字符串</div>
    <div>默認(rèn)值：{{text2}}</div>
    <div>validator:限制條件(小于100在控制臺(tái)有警告)-{{number2}}</div>
  </div>
</template>
<script>
export default {
  name: "Component1",
  props: {
    text: {
      type: String
    },
    text1: {},
    text2:{
      type:String,
      default:"這是默認(rèn)值"
    },
    number: {
      type: Number
    },
    number2:{
      type:Number,
      validator(val){
        console.log(val)
        return val > 100
      }
    },
    obj: {},
    arr: {}
  },
  data() {
    return {
      txt: this.text
    };
  },
  computed: {
    num() {
      return this.number + 1;
    }
  },
  methods: {
    change() {
      this.txt = "修改了";
    }
  }
};
</script>

父組件：

<template>
  <div class="about">
    <h1>組件</h1>
    <my-component1 
      text="這是父組件傳入?yún)?shù)" 
      :text1="msg"
      :number="num"
      :number2="num2" 
      :obj="obj"
      :arr="arr"></my-component1>
  </div>
</template>
<script>
import MyComponent1 from "../components/Component1"
export default {
  data() {
    return {
      msg:"這是動(dòng)態(tài)參數(shù)",
      num:1,
      num2:200,
      obj:{
        name:"john",
        age:18
      },
      arr:[1,2,3,4,5]
    };
  },
  methods:{
   
  },
  components:{
    MyComponent1
  }
};
</script>