VUE组件(父子组件)

 

 

组件步骤

创建组件构造器

组件注册

使用组件

简单示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <aaa></aaa>
</div>

</body>
<script src="vue.js"></script>
<script>
    const cpnC = Vue.extend({
        template:"<p>hello world!</p>>"
    })

    Vue.component("aaa", cpnC)

    new Vue({
        el:"#app"
    })  // 这个步骤很关键，因为要实例化，如果不实例化，找不到aaa
</script>
</html>


也可以放一起
    Vue.component("aaa", cpnC)

    new Vue({
        el:"#app"，
　　　　　　component：{
　　　　　　aaa：cpnC

}

    })
 

 

父子组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <father_component></father_component>
</div>

</body>
<!-- 先引入 Vue -->
<script src="vue.js"></script>
<script>
    const son_component = Vue.extend({
        template:
            `
                <div>
                    <h2>Hello , this is son component</h2>
                    <p>line1</p>
                    <p>line2</p>
                    <p>line3</p>

                </div>
                `,

    })
    const father_component = Vue.extend({
        template:
            `
                <div>
                    <h2>Hello , this is father component</h2>
                    <p>line1</p>
                    <p>line2</p>
                    <p>line3</p>
                    <son_component></son_component>
                </div>
                `,
        components: {
            son_component: son_component
        }
    })
    var app = new Vue({
        el: "#app",
        components: {
            father_component: father_component
        }
    })


</script>
</html>

 

组件抽离写法--语法糖

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <father_component></father_component>
</div>

</body>
<!-- 先引入 Vue -->
<script src="vue.js"></script>
<script type="text/x-template" id="father_component_id">
    <div>
        <h2>Hello , this is father component</h2>
        <p>line1</p>
        <p>line2</p>
        <p>line3</p>
    </div>
</script>
<script>

    const father_component = Vue.extend({
        template: "#father_component_id"
    })
    var app = new Vue({
        el: "#app",
        components: {
            father_component: father_component
        }
    })


</script>
</html>

 

组件data传输数据，data必须是函数

这个示例更能说明问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <click_cpn></click_cpn>
        <click_cpn></click_cpn>
        <click_cpn></click_cpn>

    </div>
</body>
<!-- 先引入 Vue -->
<script src="vue.js"></script>
<script type="text/x-template" id="click_cpn_id">
<div>
    <div>{{counter}}</div>
    <button v-on:click="add">-</button>
    <button v-on:click="sub">+</button>
</div>
</script>

<script>
    const click_cpn = Vue.extend({
        template: "#click_cpn_id",
        data(){
            return {
                counter: 0
            }
        },
        methods:{
            add(){ // 注意， 这里的写法，一定要这样写才可以， add: function(){}这样写报错
                this.counter += 1
            },
            sub() {
                this.counter -= 1
            }
        }
    })

    var app = new Vue({
        el:"#app",
        components:{ // 这里是components 不是component
            click_cpn, click_cpn
        }

    })



</script>
</html>
View Code

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <father_component></father_component>
</div>

</body>
<!-- 先引入 Vue -->
<script src="vue.js"></script>
<script type="text/x-template" id="father_component_id">
    <div>
        <h2>{{title}}</h2>
        <p>line1</p>
        <p>line2</p>
        <p>line3</p>
    </div>
</script>
<script>

    const father_component = Vue.extend({
        template: "#father_component_id",
        // 注意，这里的data必须是函数的形式来对应上面的模板数据， {{title}}
        // 必须是函数形式传递， 而且不能在app中的data中调用，组件有自己的data
        // 如果不这么调用，会报错！！！
        data(){
            return {
                title: "Hello ,this is a father component!" 
            }
        }
    })
    var app = new Vue({
        el: "#app",
        components: {
            father_component: father_component
        }
    })


</script>
</html>

 利用elementUi 写父子组件，传递值代码-共三种方法

 第一种

第二种

 

 

 第三种方法

<template>
  <div id="app">
    <div>hello world!</div>
    <Parent></Parent>

  </div>
</template>

<script>
import Parent from "@/views/Parent";
export default {
  name: 'App',
  components: {
    Parent
  }
}
</script>

<style>

</style>
App.vue

 

<template>
        <div id="parent_id">
        <h1>
            Hello Parent !
        </h1>
            <Son v-bind:msg="'父给子传递消息'"></Son>
    </div>
</template>

<script>
    import Son from "@/views/Son";
    export default {
        name: "Parent",
        components:{
            Son
        }
    }
</script>

<style scoped>

</style>
Parent.vue

 

<template>
    <div id="son_id">
        <h1>
            Hello Child !
        </h1>
        <p>{{msg}}</p>
    </div>
</template>

<script>
    export default {
        name: "Son",
        props:{
            msg:{
                type: String,
                default: 'aaa'
            }
        }
    }
</script>

<style scoped>

</style>
Son.vue

有个注意事项 --- 里面必须有个单引号（我猜测和防注入有关）

 

 

 

 区别在于， 第二个msg是一个变量， 而：msg是传递值

 儿子给父亲传值

通常儿子给父亲传值需要有一个事件来触发

<template>
        <div id="parent_id">
        <h1>
            Hello Parent !

        </h1>
            <div>{{show_data}}</div>
            <Son v-bind:msg="'父给子传递消息'" @show_msg='show_msg'></Son>

    </div>
</template>

<script>
    import Son from "@/views/Son";
    export default {
        data(){
            return {
                show_data: ''
            }
        },
        name: "Parent",
        components:{
            Son
        },
        methods:{
            show_msg(val) {
                this.show_data = val
            }
        }
    }
</script>

<style scoped>

</style>
Parent.vue

 

<template>
    <div id="son_id">
        <h1>
            Hello Child !
        </h1>
        <p>{{msg}}</p>
        <button @click="son_father_msg">按钮</button>
    </div>
</template>

<script>
    export default {
        name: "Son",
        props:{
            msg:{
                type: String,
                default: 'aaa'
            }
        },
        methods:{
            son_father_msg() {
                this.$emit("show_msg", "I am from son, hello father!")
            }
        }
    }
</script>

<style scoped>

</style>
Son.vue

 

 

 

 

 

 

 非父子间传值

 

方法一：

 

<template>
  <div id="app">
    <div>hello world!</div>
    <button @click="trans_parent">传递消息</button>
    <Parent></Parent>

  </div>
</template>

<script>
import Parent from "@/views/Parent";

import bus from "@/until/bus";

export default {
  name: 'App',
  components: {
    Parent,

  },
  methods:{  // 注意这里，我之前写错了，写的是mounted，一定要注意
    trans_parent(){
      bus.$emit('msg', 'i came from app')
    }
  }
}
</script>

<style>

</style>
App.vue

 

import Vue from 'vue'
export default new Vue
bus.js

 

<template>
    <div id="son_id">
        <h1>
            Hello Child !
        </h1>
        {{msg}}
<!--        <button>Son按钮</button>-->
    </div>
</template>

<script>
    import bus from "@/until/bus";

    export default {
        name: "Son",
        data(){
            return {
                msg:''
            }
        },
        methods:{

        },
        mounted(){
            bus.$on("msg", (val) =>{
                    this.msg = val
                }
            );
        }
    }
</script>

<style scoped>

</style>
Son.vue

 

 

posted @ 2020-06-28 20:31  我当道士那儿些年  阅读(634)  评论(0)  编辑  收藏  举报