man
- // 是所有文件的入口
- // 全局的 随便用
- import Vue from 'vue'
- import App from './App.vue'
- import MyHeader from './components/MyHeader' //1、引入组件
- Vue.config.productionTip = false
- Vue.component('my-header',MyHeader) //2、全局注册组件
- new Vue({
- render: h => h(App),
- }).$mount('#app')
App
- <div id="app">
- <img alt="Vue logo" src="./assets/logo.png">
- <MyCpn>MyCpn>
- <my-cpn :news="msg" :movie="movies" :obj="obj" :fathermethod="fathermethod">my-cpn>
- <my-header>my-header>
- div>
-
- template>
-
- <script>
- //那个需要引入那个
- import MyCpn from '@/components/MyCpn.vue' //1引入组件
-
- export default {
- name: 'App',
- data (){
- return {
- msg:'我是中国人',
- movies:["洛基","复仇者联盟","钢铁侠"],
- obj:{
- name:'张三',
- age:20
- }
- }
- },
- components:{ //2注册组件
- MyCpn
- },
- methods:{
- fathermethod(){
- console.log('我是父组件的方法');
- }
- }
- }
- script>
-
- <style>
- #app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
- margin-top: 60px;
- }
- style>
MyHeader
- <div>
- <h2>我是myheader组件h2>
- <h2>我是myheader组件h2>
- div>
-
- <script>
- export default {
- name: "MyHeader",
-
- // 全局组件
- };
- script>
-
- <style scoped>
- h2 {
- color: green;
- }
- style>
MyCpn
- <div>
- <h2>我是MyCpn组件h2>
-
- <h2>{{ movie }}h2>
- <h2>{{ obj }}h2>
- <h2>{{fathermethod}}h2>
- <button @click="sonbtn">点击button>
- div>
-
- <script>
- export default {
- name: "MyCpn",
- // props:{
- // news:{
- // type:String
- // }
- // },
- // props: ["news"],
- // props:{
- // news:{
- // type:String,
- // default:'zzzzz',
- // required:true
- // }
- // }
- props: {
- movie: {
- type: Array,
- default() {
- return [1, 2, 3, 4];
- },
- },
- obj: {
- type: Object,
- default() {
- return { a: 1 };
- },
- },
- fathermethod:{
- type:Function
- }
- },
- methods:{
- sonbtn(){
- this.fathermethod()
- }
- }
- };
- script>
-
- <style scoped>
- h2 {
- color: red;
- }
- style>
