vue组件

组件

1、组件内容
与app.vue内容相同

<template>
    <div>
        
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="">
    
</style>

2、组件注册与使用
（1）全局注册

Vue.component('组件名称‘，回调函数/组件模板）；全局加载
注意：组件名称必须加引号！

需要注意的是：全局注册必须写在vue实例化之前！！！

main.js文件中
import Vue from 'vue'
import App from './App.vue'

直接加模板
Vue.component("tt", {
  template: "<div>我是人民的子女</div>"
})
Vue.component("haha", {
  template: '<h1>武汉加油<h1>'
  //模板template、数据data()、函数methods()等都可以写
})

回调函数  使用require
Vue.component("test",(resolve)=>{
  require(["./test"],resolve)
})

异步函数
Vue.component("test",(resolve)=>{
  setTimeout(()=>{
    require(["./test"],resolve)
  },1000)
})

new Vue({
  el: '#app',
  render: h => h(App),
})

这样全局注册的组件就可以到处用了！

<template>
  <div id="app">
    <haha></haha>
    <tt></tt>
    <test></test>
  </div>
</template>

<script>
import test from "./test";
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
};
</script>

（2）局部注册

在需要导入组件的文件中 直接加载
①import导入 (app.vue)
②注册组件 两种方式
③使用组件

app.vue文件
<script>
第一步
import test from "./test";
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
第二步
  components: {
//第一种
    test 直接写import进来的名字
    //第二种
    run:test
  }
};
第三步  
//第一种  对应第二步的第一种
<test></test>
//第二种  对应第二步的第二种
<run></run>
</script>

在需要导入组件的文件中 异步加载
①在component中写异步函数
②<函数名></函数名>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  第一步
  components: {
    findmenu(resolve){
      require(['./test'],resolve);
    }
  }
}
第二步
<findmenu></findmenu>
</script>

在需要导入组件的文件中 动态加载
①import 导入组件
②在methods/computed中写一个函数，return 导入组件变量；
③<component :is=“函数名()”

<script>
第一步
import test from './test'
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  第二步
  methods: {
    findmenu(){
      return test;
    }
  }
}
第三步
<component :is="findmenu()"></component>
</script>

<script>
import test from './test'
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  第二步
  computed: {
    find:function (){
      return test;
    }
  },
}
第三步
<component :is="find"></component>
</script>

在需要导入组件的文件中
①import Vue、组件
②Vue.component("组件名"，导入组件变量名)
③<组件名

<script>
import Vue from 'vue'
import test from './test'
Vue.component("tea",test);
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
}
第三步
 <tea></tea>
</script>

3、组件传值
父组件向子组件传值

⑴父组件通过在标签上定义属性传值给子组件，可以直接传值，也可以动态绑定传值，子组件props:{}通过相同名称接收 ，可以采用props:{属性名1：类型,属性名2：类型}方式约束父组件传递给子组件的属性的类型，若类型不一致，不会报错，只会报警告
⑵子组件不能写带有"-"的属性名称，如果父组件写带连接符的属性名，在子组件中可用属性名的驼峰式写法

<template>
  <!-- 主组件 -->
  <div id="app">
    首页
    <tests :m="m" name="毛肚" :m-t="s" :parent="myself"></tests>
  </div>
</template>
<script>
import tests from "./test";
export default {
  name: "app",
  data() {
    return {
      m: "Welcome to Your Vue.js App",
      s:"332",
      myself:this
    };
  },
    components: {
    tests,
  }
};
</script>

<template>
<!-- 子组件 -->
    <div id="test" >
      子组件 
      {{m}}
      {{name}}
      {{mT}}
    <button @click="sendparent">获取父组件this</button>
    </div>
</template>
<script>
export default {
    name:"test",
    props:{
      m:String,
      name:String,
      mT:String,
      parent:Object
    },
    methods: {
      sendparent(){
        console.log(this.parent);
      }
    },
}
</script>

子组件向父组件传值

⑴子组件不能通过props的方式给父组件传值，但是可以先接收父组件的this指针，再通过this对父组件中的变量进行操作。
⑵子组件也可以通过this.$parent得到父组件，然后直接可对父组件的变量进行操作。
⑶当父组件将this传递给子组件时，必须采用动态绑定的方式传递，否则子组件只能接受this字符串

非子父组件间的传值

非子父组件间高效的传值可以采用事件车的方式：一个组件发送消息，一个组件监听并接收消息。通过相同变量名来进行通信

1、新建一个emit文件，用来写事件车

emit.js

import Vue from 'vue';
const vue=new Vue();//新建一个vue实例
export default vue;

2、在需要发送消息的组件中

import Emit from './emit/emit'导入emit.js文件
export default {
    name:"contentmenu",
    props:{
        parent:Object
    },
    methods:{
        sendmsg(){
            //发送广播
            Emit.$emit("msginfo","你是底部组件！");
        }
    }
}

3、在接收消息的组件中

import Emit from "./emit/emit";//导入emit.js文件
export default {
  name: "footermenu",
  mounted() {
    //自动监听
    Emit.$on("msginfo", res => {
      console.log(res);
    });
  }
};

4、执行方法
父组件执行子组件方法

子组件的方法
parenttome(){
    console.log("父亲执行儿子");
}
父组件中
<contentmenu ref="child" :parent="myself"></contentmenu>
this.$refs.child.parenttome() 

子组件执行父组件方法

父组件方法
giveMe(){
      console.log("儿子执行父亲");
    }
子组件
 this.parent.giveMe();