精华内容
下载资源
问答
  • vue组件传值

    2019-10-25 17:01:31
    vue 组件传值 后续代补充

    vue 组件传值及常见问题

    一组件的传值对象
    常见的传值对象有:1 父子组件传值 2 兄弟组件传值
    常见的父子组件传值方式可以通过 props 和emit。
    常见的兄弟组件传值方式可以通过,子传给父,父再传给子。但如果是非兄弟组件呢?这时候可以通过eventHub*(注册全局事件处理函数)。来解决组件的传值。或者使用vuex或者缓存

    展开全文
  • Vue组件传值

    千次阅读 2020-09-25 16:52:56
    Vue组件传值 什么是组件? 这里有一个 Vue 组件的示例: // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-...

    Vue组件传值

    什么是组件?

    这里有一个 Vue 组件的示例:

    // 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })
    

    组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 button-counter。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:

    <div id="app">
      <button-counter></button-counter>
    </div>
    
    var app = new Vue({ 
    	el: '#app'
    })
    

    因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 datacomputedwatchmethods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

    通过 Prop 向子组件传递数据

    Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题,我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中:

    示例:

    <div id="app">
        <ul>
            <!-- 把item的值赋值给product变量(props中的值),向子组件传递数据 -->
            <product-com v-for="item,index in productList" :product="item"></product-com>
        </ul>
    </div>
    
    Vue.component("product-com",{
        // 通过 Prop 向子组件传递数据
        props: ["product"],
        template: `
    <li>
    <h3>产品名称:{{ product.title }}</h3>
    <h4>产品描述:{{ product.brief }}</h4>
    <p>产品价格:{{ product.prize }}</p>
    </li>
    `,
    })
    var app = new Vue({
        el: "#app",
        data: {
            productList: [
                {
                    title: "产品1",
                    brief: "产品描述1",
                    prize: "价格1"
                },
                {
                    title: "产品2",
                    brief: "产品描述2",
                    prize: "价格2"
                },
                {
                    title: "产品3",
                    brief: "产品描述3",
                    prize: "价格3"
                },
                {
                    title: "产品4",
                    brief: "产品描述4",
                    prize: "价格4"
                },
            ]
        }
    })
    

    效果图:

    通过 $emit 向父组件传递数据

    语法:

    vm.$emit( eventName, […args] )
    
    • vm – Vue的实例化对象

    • $emit – Vue实例化对象中的一个方法

    • eventName – 传递给父组件的事件名称

    • args – 需要传递给父组件的数据内容

    示例:

    <div id="app">
        <ul>
            <school v-for="item,index in schoolList" @cschool="changeEvent" :index="index" :schoolname="item"></school>
        </ul>
        <h2>选中的学校是:{{ chooseSchool }}</h2>
    </div>
    
    Vue.component("school",{
        // 通过prop父组件向子组件传递数据
        props: ["index","schoolname"],
        template: `
    <li>
    <h3>{{ index }}--学校名称:{{ schoolname }}</h3>
    <button @click="chooseEvent(schoolname)">选择学校</button>
    </li>
    `,
        methods: {
            chooseEvent: function(schoolname){
                // console.log(schoolname);
                // 通过$emit给父组件传递数据
                this.$emit("cschool",schoolname);
            }
        }
    })
    var app = new Vue({
        el: "#app",
        data: {
            schoolList: ["清华","北大","浙大"],
            chooseSchool: ""
        },
        methods: {
            changeEvent: function(data){
                // console.log(data);
                this.chooseSchool = data;
            }
        }
    })
    

    子组件会先接收到父组件传递过来的数据,进行页面挂载(渲染),当点击子组件中的button按钮时,会触发 chooseEvent 事件,这个事件会通过 $emit 实例方法把数据传递给父组件,父组件使用 $emit 自定义的事件名,所以当我点击子组件的button按钮时,父组件的 $emit 自定义的事件会触发,然后就可以直接更新数据了

    组件传值的奇技淫巧

    父元素方法传值给子元素

    <div id="app">
        <ul>
            <!-- 
    因为父元素的方法可以直接修改父元素的数据
    所以将父元素的方法传递给子元素
    然后由子元素进行调用,从而修改父元素的数据
    -->
            <school v-for="item,index in schoolList" :action="changeEvent" :index="index" :schoolname="item"></school>
        </ul>
        <h2>选中的学校是:{{ chooseSchool }}</h2>
    </div>
    
    Vue.component("school",{
        // 通过prop父组件向子组件传递数据
        props: ["index","schoolname","action"],
        template: `
    <li>
    <h3>{{ index }}--学校名称:{{ schoolname }}</h3>
    <button @click="chooseEvent(schoolname)">选择学校</button>
    </li>
    `,
        methods: {
            chooseEvent: function(schoolname){
                // console.log(schoolname);
                // 这里只是使用父组件的changeEvent方法而已,并没有改变changeEvent方法的this指向
                this.action(schoolname)
            }
        }
    })
    var app = new Vue({
        el: "#app",
        data: {
            schoolList: ["清华","北大","浙大"],
            chooseSchool: ""
        },
        methods: {
            changeEvent: function(data){
                // console.log(data);
                this.chooseSchool = data;
            }
        }
    })
    

    通过父元素数据直接修改

    Vue.component("school",{
        // 通过prop父组件向子组件传递数据
        props: ["index","schoolname"],
        template: `
    <li>
    <h3>{{ index }}--学校名称:{{ schoolname }}</h3>
    <button @click="chooseEvent(schoolname)">选择学校</button>
    </li>
    `,
        methods: {
            chooseEvent: function(schoolname){
                // console.log(schoolname);
                // console.log(this);
                // 组件可以通过$parent属性找到父元素的Vue对象
                this.$parent.changeEvent(schoolname)
            }
        }
    })
    

    子元素通过调用$parent的方法修改父元素的内容

    Vue.component("school",{
        // 通过prop父组件向子组件传递数据
        props: ["index","schoolname"],
        template: `
        <li>
            <h3>{{ index }}--学校名称:{{ schoolname }}</h3>
            <button @click="$parent.changeEvent(schoolname)">选择学校</button>
        </li>
        `
    })
    

    子元素传值父元素

    Vue.component("school",{
        // 通过prop父组件向子组件传递数据
        props: ["index","schoolname"],
        template: `
                <li>
                <h3>{{ index }}--学校名称:{{ schoolname }}</h3>
                <button @click="$parent.chooseSchool = schoolname">选择学校</button>
                </li>
                `
    })
    

    $root

    Vue.component("school",{
        // 通过prop父组件向子组件传递数据
        props: ["index","schoolname"],
        template: `
                <li>
                <h3>{{ index }}--学校名称:{{ schoolname }}</h3>
                <button @click="$root.changeEvent(schoolname)">选择学校</button>
                </li>
                `
    })
    
    展开全文
  • vue 组件传值

    2021-03-18 21:50:21
    vue 组件传值 父组件向子组件传值 父组件发送数据给子组件 > 使用 :masg 这个绑定事件,向父组件传递图片的名字地址,父组件中定义ImgFile 这个值传递给子组件。 <MyImg :masg = "ImgFile" @fun = "show">...

    vue 组件传值

    父组件向子组件传值

    父组件发送数据给子组件

    > 使用 :masg 这个绑定事件,向父组件传递图片的名字地址,父组件中定义ImgFile 这个值传递给子组件。
      <MyImg  :masg = "ImgFile" @fun = "show"></MyImg> 
    

    发送方法给子组件

    父组件中的方法

          show(err, file, fileList){
            this.ImgFile = 'C:/Users/hp/Desktop/img/' + this.name;  
            console.log(this.ImgFile );
          },
    

    通过 @fun去传递这个方法

      <MyImg  :masg = "ImgFile" @fun = "show"></MyImg> 
    
    

    子组件接收数据

    props作为一个数组去接收父组件传递的值
    在这里插入图片描述
    在这里插入图片描述

    子组件接收父组件方法

            methods: {
                bntClick() {
                    this.$emit('fun') //接受方法,也可以获取父组件的内部的数据
                }
            },
    

    子组件通过设置一个方法,然后在方法中使用emit调用父组件传过来的方法

            <button @click="bntClick()">点击获取图片地址</button>
    
    

    子组件向父组件传值

    父组件

    父组件写一个方法中的data 就是子组件传过来的值

      <MyImg  :masg = "ImgFile" @func = "getMsgFormSon" ></MyImg> 
    
    
          getMsgFormSon(data){
                    this.msgFormSon = data
                    console.log(this.msgFormSon)
                },
    

    子组件

    子组件通过emit 属性 通过func这个方法传递this.msg这个值,就是给父组件传递一个方法,方法中有参数,参数就是传递的值

                sendMsg(){
                 //func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据
                 this.$emit('func',this.msg)
             }
    
    展开全文
  • Vue组件传值(父子组件传值,兄弟组件传值) Vue组件传值分为三种方式:父传子,子传父,兄弟组件之间传值 下面咱们根据顺序一 一分享: 一、父组件向子组件传值(props) 父组件向子组件传值,核心就是利用在父...

    Vue组件传值(父子组件传值,兄弟组件传值)

    Vue组件传值分为三种方式:父传子,子传父,兄弟组件之间传值

    下面咱们根据顺序一 一分享:

    一、父组件向子组件传值(props)

    父组件向子组件传值,核心就是利用在父组件中给子组件标签添加自定义属性,子组件在其内部,通过props接收组件身上被添加的指定属性;

    在子组件中通过props来接收父组件传递过来的内容,具体是通过属性名来接收,父组件向子组件传值的时候,属性有两种绑定方式,一种是写死的静态方式,一种是v-bind动态绑定的属性值传递,属性也可以传递多个,就是在props里面再加多个属性来接收就行;

    props属性值类型:[String   Number  Boolean   Array   Object ]

    下面我们来看看静态绑定属性和动态绑定属性所演示的代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
    </head>
    
    <body>
        <script src="./js/vue.js"></script>
        <div id="app">
            <div>{{pmsg}}</div>
            <!--1、menu-item  在 APP中嵌套着 故 menu-item   为  子组件      -->
            <!-- 给子组件传入一个静态的值 -->
            <menu-item title='来自父组件的值'></menu-item>
            <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle  
                来自父组件data 中的数据 . 
                传的值可以是数字、对象、数组等等
            -->
            <menu-item :title='ptitle' content='hello'></menu-item>
        </div>
    
        <script type="text/javascript">
            Vue.component('menu-item', {
                // 3、 子组件用属性props接收父组件传递过来的数据  
                props: ['title', 'content'],
                data: function () {
                    return {
                        msg: '子组件本身的数据'
                    }
                },
                template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
            });
            var vm = new Vue({
                el: '#app',
                data: {
                    pmsg: '父组件中内容',
                    ptitle: '动态绑定属性'
                }
            });
        </script>
    </body>
    
    </html>

    二、子组件向父组件传值:

    props传递数据原则:单项数据流,就是只允许父组件向子组件传递数据,而不允许子组件直接操作props里面的数据;

    • 子组件用$emit()触发事件

    • $emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据

    • 父组件用v-on 监听子组件的事件

    子组件向父组件传值基本步骤:

    1、在父组件中,给子组件标签绑定自定义事件(自定义事件如何触发?根据猜测一定是通过代码触发)

    2、在子组件中,想办法去触发绑定在自己身上的自定义事件(this.$emit(自定义事件名))

    3、子组件如何去或者说在什么位置在哪里写这个this.$emit

    methods :{Handel(){this.$emit(xxx)}}

    生命周期:mounted(){this.$emit(xxx) }

    4、当子组件成功执行了$emit之后子组件身上的自定义事件触发,此时该自定义事件对应的事件执行函数执行

    代码演示:

    <div id="app">
        <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
         <!-- 2 父组件用v-on 监听子组件的事件
    		这里 enlarge-text  是从 $emit 中的第一个参数对应   handle 为对应的事件处理函数	
    	-->	
        <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          子组件向父组件传值-携带参数
        */
        
        Vue.component('menu-item', {
          props: ['parr'],
          template: `
            <div>
              <ul>
                <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
              </ul>
    			###  1、子组件用$emit()触发事件
    			### 第一个参数为 自定义的事件名称   第二个参数为需要传递的数据  
              <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
              <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
            </div>
          `
        });
        var vm = new Vue({
          el: '#app',
          data: {
            pmsg: '父组件中内容',
            parr: ['apple','orange','banana'],
            fontSize: 10
          },
          methods: {
            handle: function(val){
              // 扩大字体大小
              this.fontSize += val;
            }
          }
        });
      </script>
    

    三、兄弟之间的传递:

    • 兄弟之间传递数据需要借助于事件中心,通过事件中心传递数据,提供事件中心 var hub = new Vue()

    • 传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据)

    • 接收数据方,通过mounted(){} 钩子中 触发hub.$on()方法名

    • 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据

    代码演示:

    <div id="app">
        <div>父组件</div>
        <div>
          <button @click='handle'>销毁事件</button>
        </div>
        <test-tom></test-tom>
        <test-jerry></test-jerry>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          兄弟组件之间数据传递
        */
        //1、 提供事件中心
        var hub = new Vue();
    
        Vue.component('test-tom', {
          data: function(){
            return {
              num: 0
            }
          },
          template: `
            <div>
              <div>TOM:{{num}}</div>
              <div>
                <button @click='handle'>点击</button>
              </div>
            </div>
          `,
          methods: {
            handle: function(){
              //2、传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据)   触发兄弟组件的事件
              hub.$emit('jerry-event', 2);
            }
          },
          mounted: function() {
           // 3、接收数据方,通过mounted(){} 钩子中  触发hub.$on(方法名
            hub.$on('tom-event', (val) => {
              this.num += val;
            });
          }
        });
        Vue.component('test-jerry', {
          data: function(){
            return {
              num: 0
            }
          },
          template: `
            <div>
              <div>JERRY:{{num}}</div>
              <div>
                <button @click='handle'>点击</button>
              </div>
            </div>
          `,
          methods: {
            handle: function(){
              //2、传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据)   触发兄弟组件的事件
              hub.$emit('tom-event', 1);
            }
          },
          mounted: function() {
            // 3、接收数据方,通过mounted(){} 钩子中  触发hub.$on()方法名
            hub.$on('jerry-event', (val) => {
              this.num += val;
            });
          }
        });
        var vm = new Vue({
          el: '#app',
          data: {
            
          },
          methods: {
            handle: function(){
              //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据  
              hub.$off('tom-event');
              hub.$off('jerry-event');
            }
          }
        });
      </script>
    

     

     

     

     

     

     

     

    展开全文
  • Vue 组件传值

    千次阅读 2018-05-28 16:47:15
    回想一下用Vue开发也有一年多...今天主要总结一下Vue组件传值的几种常用方法:1、通过路由带参数传值 ① A组件通过query把id传给B组件 this.$router.push({path:'/B',query:{id:1}}) ② B组件接收this.$route.que...
  • VUE组件传值

    2021-05-18 11:35:32
    父组件向子组件传值
  • vue组件传值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,090
精华内容 4,436
关键字:

vue组件传值

vue 订阅