vue组件父与子通信-登录窗口

Z时代
2024-01-10
分类：综合

vue

一、组件间通信（父组件 --> 子组件）
步骤：
①父组件在调用子组件传值
<child-component myValue="123"> </child-component>
②在子组件中获取父组件传来的值
Vue.component('child-component',{
　　props:['myValue'],
　　template:''
})

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>父传子</title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <parent-component></parent-component>
    </div>
    <script>
        // 在vue中一切都是组件
        //父传子
        Vue.component("parent-component",{
            data:function(){
                return {
                    gift:"传家宝"
                }
            },
            template:`
                <div>
                    <h1>这是父组件</h1>
                    <hr>
                    <child-component v-bind:myValue="gift"></child-component>
                </div>
            `
        })
        Vue.component("child-component",{
            props:["myValue"],
            template:`
                <div>
                    <h1>这是子组件</h1>
                    <p>{{"父传递的值："+myValue}}</p>
                </div>
            `
        })
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

myValue是属性名，必须都一样……拿data中的用v-bind:或者：
props是property属性,是个数组

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>父子之间通信练习</title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <my-login></my-login>
    </div>
    <script>
/*
    登录窗口
    创建4个组件，分别是my-label my-input my-button my-login(复合组件)
*/
        Vue.component("my-label",{
            props:["myLabel"],
            template:`
                <div>
                    <label>{{myLabel}}</label>
                </div>
            `
        })
        Vue.component("my-input",{
            template:`
                <div>
                    <input type="text"/>
                </div>
            `
        })
        Vue.component("my-button",{
            props:["myButton"],
            template:`
                <div>
                    <button>{{myButton}}</button>
                </div>
            `
        })
        //复合组件
        Vue.component("my-login",{
            data:function(){
                return {
                    uname:"用户名",
                    upwd:"密码",
                    login:"登录",
                    register:"注册"
                }
            },
            template:`
                <div>
                <my-label v-bind:myLabel="uname"></my-label>
                <my-input></my-input>
                <my-label v-bind:myLabel="upwd"></my-label>
                <my-input></my-input>
                <my-button v-bind:myButton="login"></my-button>    
                <my-button v-bind:myButton="register"></my-button>
                </div>
            `
        })
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title></title>
</head>
<body>
<div id="container">
    <my-login></my-login>
</div>
<script>
    Vue.component('my-label',{
        props:['labelName'],
        template:'<label>{{labelName}}</label>'
    })
    Vue.component('my-input',{
        props:['tips'],
        template:'<input type="text" :placeholder="tips"/>'
    })
    Vue.component('my-button',{
        props:['btnName'],
        template:'<button>{{btnName}}</button>'
    })
    Vue.component('my-login',{
        template:`
        <form>
            <my-label labelName="用户名"></my-label>
            <my-input tips="请输入用户名"></my-input>
            <br/>
            <my-label labelName="密码"></my-label>
            <my-input tips="请输入密码"></my-input>
            <br/>
            <my-button btnName="登录"></my-button>
            <my-button btnName="注册"></my-button>
        </form>
        `
    })
    new Vue({
        el: '#container',
        data: {
            msg: 'Hello Vue'
        }
    })
</script>
</body>
</html>