vue compent 组件练习笔记

简述

根据这个视频学习整理以下知识点：

• 如何定义组件
• 如何使用组件
• 如何传递参数给组件
• 参数的类型限制
• 只定义限制函数
• 自定义相应的计算属性
• 修改传递的参数值

代码

分两个文件，1个是父组件，一个是子组件
组件：

<template>
  <div>
    <h3>这是组件内容</h3>
    <div>文本类型参数 ： {{text}}</div>
    <div>动态参数： {{text1}}</div>
    <div>数字参数（必须用动态参数）:{{number}}-{{typeof number}}</div>
    <div>对象参数: {{obj}}-{{obj.name}}</div>
    <div>数组参数: {{arr.join('-')}}</div>
    <hr />
    <h3>修改属性的值</h3>
    <button @click="change">修改</button>
    <div>文本类型参数 ： {{txt}}</div>
    <div>计算属性: {{num}}</div>
    <hr>
    <h3>限制传入属性</h3>
    <div>type:限制传入类型</div>
    <div>default:默认的字符串</div>
    <div>默认值：{{text2}}</div>
    <div>validator:限制条件(小于100在控制台有警告)-{{number2}}</div>
  </div>
</template>
<script>
export default {
  name: "Component1",
  props: {
    text: {
      type: String
    },
    text1: {},
    text2:{
      type:String,
      default:"这是默认值"
    },
    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="这是父组件传入参数" 
      :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:"这是动态参数",
      num:1,
      num2:200,
      obj:{
        name:"john",
        age:18
      },
      arr:[1,2,3,4,5]
    };
  },
  methods:{
   
  },
  components:{
    MyComponent1
  }
};
</script>