组件

官网(https://cn.vuejs.org/v2/guide/components.html)

组件分为局部组件和全局组件

局部组件：是内容中国的一部分只是在当前组件加载的时候

全部组件：如：导航栏侧边栏运用到任意地方

一局部组件

简单版

<div id="app">
    <!--3. 用子-->
    <App></App>
</div>

<script>
    // App 组件  有 template + css + js
    // 1 生子
    const App = {
        template:`<h3>我是App组件</h3>`
    };

    let app = new Vue({
        el:'#app',
        data:{

        },
        // 2.挂子
        components:{
            App
        }
    })
</script>

复杂版-----主要是在生子处

<div id="app">
    <!--3. 用子-->
    <App></App>
</div>

<script>
    // App 组件  有 template + css + js
    // 1 生子
    // 在组件中的data数据 必须是一个函数，返回一个对象
    const App = {
        data() {
            return {
                msg: '我是App组件1'
            }
        },
        // template 标签必须在一个
        template: `
                <div>
                <h3>{{ msg }}</h3>
                <button @click="handelClick">提交</button>
                </div>

                    `,
        methods:{
            handelClick(){
                alert(123)
            }
        }

    };

    let app = new Vue({
        el: '#app',
        data: {},
        // 2.挂子
        components: {
            App
        }

    })
</script>

二全局组件

全局组件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width ,initial-scale=1">
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <!--3. 用子-->
    <App></App>
</div>

<script>
    // 定义一个全局组件

    Vue.component('Vheader',{
       template:`<h1>我的导航组件</h1>`
    });
    Vue.component('Vaside',{
       template:`<h1>我的左侧导航</h1>`
    });
    // 局部组件
    const VConent = {
         template: `
                <div>
                    <h1>我是内容局部组件</h1>
                </div>

                    `
    };

    const App = {
        components:{
            VConent  // 挂载子组件
        },
        template: `
                <div>
                <Vheader></Vheader>
                <Vaside></Vaside>
                <VConent></VConent>   
                </div>

                    `

    };

    let app = new Vue({
        el: '#app',
        data: {},
        // 2.挂子
        components: {
            App
        }

    })
</script>

</body>
</html>

父传子组件

① 在子组件中写 props=[xxx] 接收父组件挂载的属性

② 父组件中绑定 xxx=‘msg’

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width ,initial-scale=1">
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <!--3. 用子-->
    <App></App>
</div>

<script>

    Vue.component('Vchild',{
        template:`
               <div>
                <div style="color: red">我是子组件</div>
                <h3>{{ childMsg }}</h3>
                </div>
        `,
        props:['childMsg']
    });
    const App = {
        data(){
          return{
              msg:'我是父组件传值'
          }
        },

        template: `
                <div>
                    <Vchild :childMsg="msg"></Vchild>
                </div>
                    `
    };

    let app = new Vue({
        el: '#app',
        data: {},
        // 2.挂子
        components: {
            App
        }

    })
</script>

</body>
</html>

子传父

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width ,initial-scale=1">
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <!--3. 用子-->
    <App></App>
</div>

<script>

    // 子组件

    // 子传父
    // ① input框 在inputHandler使用
    Vue.component('Vchild', {
        template: `
               <div>
                <div style="color: red">我是子组件</div>
                <h3>{{ childMsg }}</h3>
                <input type="text" @input="inputHandler">
                </div>
        `,
        props: ['childMsg'],
        methods: {
            inputHandler(e) {
//                console.log(e.target.value)
                const val = e.target.value;
                this.$emit('Handlerinput', val)
            }
        }
    });
    // 父组件
    const App = {
        data() {
            return {
                msg: '我是父组件传值',
                newVal:''
            }
        },
        methods:{
            inputVal(newVal){
                this.newVal = newVal
            }
        },
        template: `
                <div>
                    <Vchild :childMsg="msg" @Handlerinput="inputVal"></Vchild>
                    <div class="father">
                        数据：{{ newVal }}
                    </div>
                </div>
                    `
    };
    let app = new Vue({
        el: '#app',
        data: {},
        // 2.挂子
        components: {
            App
        }

    })
</script>

</body>
</html>

vue学习（三）组件

组件

一局部组件

二全局组件

全局组件

父传子组件

子传父

猜你喜欢

vue学习（三）组件

组件

一 局部组件

二 全局组件

全局组件

父传子组件

子传父

猜你喜欢

一局部组件

二全局组件