vue一周小结（5）

一.props一般用于父子组件通信

         1.只接收值
         props:["name","age"],
         2.约束类型
         props:{
         name:String,
         age:Number
                   },
         3.约束类型，必要性，指定默认值
         props:{
         name:{
               type:String,
               required:true,
               default:"李四"
                   },
               age:{
               type:Number,
               required:false,
               default:100
                  }
       
        

二.组件规则 

 1.向外暴露的名称需要使用驼峰命名(推荐使用)，使用-连接
 2.导入组件时，取的名称最好暴露的名称一致，名称可以任意定义(不推荐)
 3.但凡注册了组件，必须使用组件

例：

export default {
  name: 'App',
  components: {
    // HelloWorld,
    // "aaa":HelloW,
    // stutend,
    MyDay01
  },
  data() {
    return {
      // msg:"我是测试的元素111111111",
      // msgs:"我是测试的元素22222222"
      ages:20,
    }
  },
  methods: {
    // func1(){
    //   console.log(this.$refs);
    //   // 1.给元素设置ref，获取的是Dom
    //   // console.log(this.$refs.newRef.style.color);
    //   // console.log(this.$refs.newRef.className);
    //   // console.log(this.$refs.newRef.title);
    //   // 给组件设置ref，获取的是vc
    //   console.log(this.$refs.stuRef.userName);
    // }
  },

三. 自定义事件

例：

template>
  <div>
    <h1>我是day03组件</h1>
    <button @click="btn()">提供自定义事件</button>
    <h1>{{ userName }}</h1>
    <h1>{{ age }}</h1>
  </div>
</template>

<script>
export default {
    name:"MyDay03",
    props:["age"],
    data() {
        return {
            userName:"张三",
            // age:"小红"
            ids:99,
            str:"我是自定义事件点击"
        }
    },
    methods:{
        btn(){
            this.$emit("wq",this.userName)
            this.$emit("zpj",this.ids)
            this.$emit("click")
        }
    },
    // created(){
    //     this.$emit("wq",this.userName)
    // }
}
</script>