Vue 组件

全局组件引入

image.png

局部组件引入

image.png

ref获取dom节点、获取组件引用

ref在html元素获取的是dom节点
ref在组件获取的是组件的引用

<template>
    <div id="home">  
        <div ref="one">11</div>  
        <Footer ref="two" :active="1"></Footer>
    </div>
</template>

<script> 

    import Footer from '../../components/Footer'
    export default {
        data() {
            return { 
            };
        }, 
        components:{
            Footer
        },
        methods:{
            //ref获取dom节点
            get_dom(){
                console.log(this.$refs.one) //结果：<div ref="one">11</div>
                console.log(this.$refs.one.innerHTML) //结果：11
            },
            //ref获取组件引用
            get_component(){
                console.log(this.$refs.two)  //获取Footer组件的引用
                console.log(this.$refs.two.name)  //获取Footer组件中data下name属性
            }
        },
        mounted(){ 
            this.get_dom()
            this.get_component()
        } 
    }
</script> 

组件绑定原生事件

<template>
    <div id="home">     
        <!-- 点击无效 -->
        <cmp @click="fun"></cmp><br/>  
        <!-- 点击有效 -->
        <cmp @click.native="fun"></cmp> 
    </div>
</template>
<script>  
    import cmp from './test.vue'
    export default {
        data() {
            return { 
            };
        }, 
        components:{
            cmp
        },
        methods:{
            fun(){
                console.log('xx')
            }
        }    
    }
</script>

非父子组件传值:bus总线

//main.js中
Vue.prototype.bus =new Vue() 

//test1.vue
<template>
  <div>
    {{age}}
    <button @click="fun">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 1
    };
  },
  methods: {
    fun() {
      this.age++;
      this.bus.$emit("sone", this.age);
    }
  }
}; 

//  test2.vue

<template> </template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.bus.$on("sone", function(name) {
      console.log('test2:',name);
    });
  }
};
</script> 

作用域插槽 slot-scope

如下面代码：父组件中决定调用组件的显示方式，是li还是h2

<template>
  <div id="home"> 
    <one>
      <template slot-scope="props">
                <li>{{props}}</li>
            </template>
    </one> 

    <one>
      <template slot-scope="props">
                <h2>{{props.names}}</h2>
            </template>
    </one> 
  </div>
</template>

<script>
import one from "./test1";
export default {
  data() {
    return {};
  },
  components: {
    one
  },
  methods: {},
  mounted() {}
};
</script>
 
//test1.vue
<template>
  <div>
    <ul>
      <slot v-for="item of list" :names="item"></slot>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3]
    };
  } 
  }
};
</script> 

组件参数效验validator

<template>
  <div id="home">     
    <one></one>   <!-- 显示默认aaa -->
    <one str="abc"></one> <!-- abc -->
    <one str="abccccc"></one> <!-- abcccc 显示正确无报错 -->
  </div>
</template>
<script>
import one from "./test1";
export default {
  components: {
    one
  }
};
</script>

//test1.vue
 <template> 
  <div>
     {{str}}
  </div>
</template>
<script>
export default {
  //检验参数会提示错误，但仍能正常显示
  props:{
    str:{
      type:String,
      default:'aaa',
      required: true,  
      validator:function(value){
        return (value.length > 5) 
      }
    }
  }
};
</script>