传值三种方式

最新推荐文章于 2023-04-02 23:58:46 发布

SLNJY

最新推荐文章于 2023-04-02 23:58:46 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/qq_41850616/article/details/116979714

版权

组件传值三种方式：1、子组件传值给父组件，2、父组件传值给子组件，3、兄弟组件之间传值

1.父传子（主要通过子组件的props方法获取父组件传递过来的值，在别人调用的时候，也可以给组件传递自定义属性。）

在父组件中给子标签绑定自定义属性：

  <menu-item title='来自父组件的值'></menu-item>
    <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle  来自父组件data 中的数据 . 
		  传的值可以是数字、对象、数组等等
	-->
    <menu-item :title='ptitle' content='hello'></menu-item>

props主要的作用：（接受自定义属性）

<script type="text/javascript">
    Vue.component('menu-item', {
      // 子组件用属性props接收父组件传递过来的数据  
      props: ['title', 'content'],
      data: function() {
        return {
          msg: '子组件本身的数据'
        }
      },
      template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        ptitle: '动态绑定属性'
      }
    });
  </script>

props：主要使用方法：和访问data数据一样（：自定义属性名=’属性值‘），模板中直接直接写名字

2.子传父（主要通过子组件使用 $emit （）触发父组件的自定义事件。）

<div id="app">
        <div>{{smsg}}</div>
        <son @myclick='handel'></son>
  </div>
  <script src="./js/vue.js"></script> 
Vue.component('son',{
            data:function(){
            return {
                msg:'你好好的'
            }
            },
            methods:{
//2.触发之后去寻找父元素身上的myclick事件，并携带一个this.msg的参数传递
                chandel(){
                    this.$emit('myclick',this.msg)
                }
            },
//1.添加点击事件出发事件
            template:`<button @click="chandel"> 点击</button>`
        })
        var vm = new Vue({
            el:'#app',
            data:{
                smsg:''
            },
//3.出发事件后，找到事件在methods里面的handel（） 并进行操作，并渲染到父元素中
            methods:{
                handel(val){
                    this.smsg=val
                }
            }

})
        </script>

步骤：1.在父组件给子标签添加自定义事件

2.在子组件上绑定自定义事件，通过点击事件出发自身的绑定事件$emit('第一个参数为自定义的事件名称' ' 第二个参数为需要传递的数据 ')

3.自定义事件触发，就会找到父组件的motheds里面的handel（）执行

3.非父子传值（兄弟之间传值）（利用时间中心机制给两兄弟添加事件监听，通过自身的触发条件来触发对方身上的事件来实现传值）

简图：

中心机制： var eventbus = new Vue()

<body>
    <div id="app">
        <tom></tom>
        <jerry></jerry>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var eventbus = new Vue()
        Vue.component('tom', {
            data() {
                return {
                    tmsg: 'abc',
                    jmsg: ''
                }
            },
            template: `<div>
                <div>tom:{{jmsg}}</div>
                <button @click='handelT'>点击</button>
                </div>` ,
            mounted: function () {
//触发监听事件，并进行赋值
                eventbus.$on('T', val => {
                    this.jmsg = val
                })

            },
            methods: {
//点击绑定J事件，并获取的this.tmsg并进行传值
                handelT: function () {
                    eventbus.$emit('J', this.tmsg)
                }
            },


        });
        Vue.component('jerry', {
            data() {
                return {
                    tmsg: '',
                    jmsg: '123'
                }
            },
            template: `<div>
                <div>JERRY:{{tmsg}}</div>
                <button @click='handelJ'>点击</button>
                </div>` ,

            mounted: function () {
//监听到J事件 并进行赋值
                eventbus.$on('J', val => {
                    this.tmsg = val
                })
            },
            methods: {
//点击绑定T事件，获取this.jnsg并进行传值
                handelJ: function () {
                    eventbus.$emit('T', this.jmsg)

                }
            },
        });

        var vm = new Vue({
            el: '#app',
 
        })
    </script>

SLNJY

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
传值三种方式

组件传值三种方式：1、子组件传值给父组件，2、父组件传值给子组件，3、兄弟组件之间传值 1.父传子主要通过子组件的props方法获取父组件传递过来的值，在别人调用的时候，也可以给组件传递自定义属性。 props主要的使用方法：<script type="text/javascript"> Vue.component('menu-item', { ...
复制链接

扫一扫