首页 > 其他分享> > 18 vue之组件通信

18 vue之组件通信

2022-02-14 16:54:33 作者：互联网

vue之组件通信

1 组件通信

1 组件通信
1 父子组件传值 (props down, events up)
2 父传子之属性验证props:{name:Number}Number,String,Boolean,Array,Object,Function,null(不限制类型)
3 事件机制a.使用 $on(eventName) 监听事件b.使用 $emit(eventName) 触发事件
4 Ref<input ref="mytext"/> this.$refs.mytext
5 事件总线var bus = new Vue();* mounted生命周期中进行监听

2 父子通信之父传子：通过自定义属性

父组件定义：name:'dzg', age:18
子组件绑定：<global :myname="name" :myage="age"></global>
子组件注册：props:['myname','myage']
子组件使用：<h1>我是父组件传过来的name----->{{myname}}</h1> <h1>我是父组件传过来的age----->{{myage}}</h1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
<global :myname="name" :myage="age"></global>

</div>
</body>
<script>
    // 定义全局组件
    Vue.component('global', {
        template: `
          <div>
              <h1>我是全局组件</h1>
              <h1>我是父组件传过来的name----->{{myname}}</h1>
              <h1>我是父组件传过来的age----->{{myage}}</h1>
              <button @click="handleClick">点我--{{name}}</button>
              <hr>
              <child></child>
          </div>
        `,
        data() {
            return {
            }
        },
        methods: {
            handleClick() {
                alert('666')
            }
        },
        props:['myname','myage']
    })


    let vm = new Vue({
        el: '#box',
        data: {
            name:'dzg',
            age:18
        },

    })

</script>
</html>

2.1 属性验证

props是对象，不是列表

props:{
            myname:String,
            isshow:Boolean,
        },

案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <navbar myname="egon" :isshow="false"></navbar>
    <!--报错-->
    <navbar myname="egon" isshow="false"></navbar>
</div>
</body>
<script>
    Vue.component('navbar', {
        template: `
            <div>
                <button>返回</button>
                父组件传递的内容是:{{myname}}
                传入的布尔是{{isshow}}
                <button>主页</button>
                <br>
            </div>
        `,
        // props:['myname'],
        props:{
            myname:String,
            isshow:Boolean,
        },
    })
    var vm = new Vue({
        el: '#box',
        data: {},

    })
</script>
</html>

3 父子通信之子传父：通过事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子通信之子传父</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
    <!--    通过自定义事件,绑定方法-->
<global v-show="isShow" @myevent="handleShow"></global>

</div>
</body>
<script>
    // 定义全局组件
    Vue.component('global', {
        template: `
          <div>
              <h1>我是子组件</h1>
              <button @click="handleClick">点我消失</button>
              <hr>
              <child></child>
          </div>
        `,
        data() {
            return {
                show:false
            }
        },
        methods: {
            handleClick() {
                //触发myevent的执行,把子组件中的变量b，传入到事件对应的方法上
                this.$emit('myevent',this.show)
            }
        },
    })


    let vm = new Vue({
        el: '#box',
        data: {
            isShow:true
        },
        methods:{
            handleShow(show){
                this.isShow=show
            }
        }

    })

</script>
</html>

标签：vue,name,18,myname,Vue,props,组件,data
来源： https://www.cnblogs.com/Haier123/p/15893172.html