精华内容
下载资源
问答
  • vue子父传值

    2020-08-06 09:55:46
    今天让我写个基于vue的系统管理员授权拆分的功能,一开始我是真的难,非常难过,因为这块代码很乱,功能也很怎么说,其实客户需求还是...页面调子页面): 就是用页面 <adminList ref="addModule" ...

    今天让我写个基于vue的系统管理员授权拆分的功能,一开始我是真的难,非常难过,因为这块代码很乱,功能也很怎么说,其实客户需求还是可以的,只不过从原代码改造,非常恶心。

    但是经过一下午的努力奋战, 我完成了 并且我对vue的父子传值有了更深的认识和理解 其实就是三把斧 很开心

    父传子(父页面调子页面):

    就是用父页面

     <adminList ref="addModule"
                     @func="getmessage" ></adminList>
    
    import adminList from './set-as-admin-list'
    
    components: {
          adminList
        },
    复制代码

    在方法里,这里一定要别拉下this.$nextTick(()=>{})

    因为这个地方相当于子组件的一个延迟加载方法,否则会报undefined 详情原因见

    Vue父组件引用子组件方法显示undefined问题原因及解决方法

    this.$nextTick(() => {
              this.$refs.addModule.init(this.struId, this.organId, false)
            })
    复制代码

    这里的$refs.addModule,相当于操作dom,就是操作子组件的里面的方法或者值

    子页面

     init (struId, organId, isAdmin) {
            debugger
            this.isAdmin = isAdmin
            this.struId = struId
            this.organId = organId
            this.getPersonList(struId)
          },
    复制代码

    ,上面就是把父页面的struId,organId,false传给了子页面,并且,还顺便调用了子页面的方法。

    并且值得注意的是,可以同一个组件在父页面用好几遍,只不过,ref="不同的值"

    父页面

     <adminList ref="authorizationModal"
                     @func="getmessage" ></adminList>
    复制代码

    子传父:

    也很简单,

    子页面

    在方法里

    this.$emit('func', data)
    复制代码

    父页面去接

    <adminList ref="authorizationModal"
                   @func="getmessage" ></adminList>
    复制代码

    其中func是要传的key

    value就是用"getmessage"去接收,这里是方法

     getmessage (data) {
            this.authorizationVisible = data
    
          },
    复制代码

    这样就把子页面的data传给了父页面

    展开全文
  • 20181101 Vue子父传值

    2018-11-01 23:21:47
    组件给组件加了传值 组件应该进行对参数进行约束 在props这个组件中 声明一个对象 type:类型 default:缺省的时候应该有什么字段 validator:function//校验器,来校验里面的内容 给组件绑定原生事件 ...

    当父组件给子组件加了传值
    子组件应该进行对参数进行约束

    在props这个子组件中
    声明一个对象
    type:类型
    default:缺省的时候应该有什么字段
    validator:function//校验器,来校验里面的内容

    给组件绑定原生事件
    需要在子组件的template中进行绑定事件
    不能再div中的再进行绑定事件,这样子组件毫无反应
    需要利用this.$emit(“click”)

    但是这种方法需要在子组件和父组件都注册事件,这样太麻烦了
    所以在click后面加上.native

    非子父组件传值问题
    利用总线机制来解决该问题

    Vue.prototype.bus=new Vue();
    这样每一个vue实例进行创建之后,都有bus这个属性

    在Vue使用插槽
    slot

    动态组件与v-once指令

    vue中css原理
    如果需要把哪个标签进行动画,需要外面嵌套一个transition的标签,这样就有了一个动画效果
    在给这个transition的标签 加一个name属性
    .v-enter .v-enter-active
    .v-leave-to .v-leave-active

    讲解更复杂的动画效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
        <link rel="stylesheet" href="animate.css">
    </head>
    <body>
    <div id="root">
        <transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake">
        <div v-if="show">hello world</div>
        </transition>
        <button @click="clickBtn">change</button>
        <script>
            var vm =new Vue({
                el:"#root",
                data:{
                  show:true
                },
                methods:{
                    clickBtn:function () {
                        this.show=!this.show
                    }
                }
            })
        </script>
    </div>
    </body>
    </html>
    

    如果想在页面刷新的时候也具有该动画
    在上面添加类样式
    appear
    appear-active-class=“animated swing”
    也可以同时用fade 和animated 的库
    type=transition“” 以transition为主
    :duration

    如果想拒绝服用vue.js中的dom操作
    直接给标签赋值一个key

    transition 有mode属性 out-in 或者 in-out

    把transition 后面加上-group相当于对整个列表都进行改变
    可以把动画都封装到组件中

    展开全文
  • Vue组件父传值组件传值Vue组件父传值组件传值可以直接使用父组件的data中的数据向组件传值吗? Vue组件父传值组件传值 在很多场景下,我们经常需要从父组件传值到定义好的组件模板中,但是 可以直接...

    Vue组件父传值向子组件传值

    在很多场景下,我们经常需要从父组件传值到定义好的子组件模板中,但是经过试验,我们发现不可以可以直接使用父组件的data中的数据向子组件传值

    用属性绑定的方式传值

    (1)父组件可以在引用子组件的时候,通过 属性绑定(v-bind)的形式,把 需要传递给子组件的数据,以属性绑定的形式绑定到子组件内部, 供子组件使用
    (2)把父组件传递过来的 parentmsg 属性,先在 子组件的props 数组中,定义一下,这样才能使用
    (3)实例:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vueApp</title>
    </head>
    
    <body>
        <div id="app">
            <!-- 父组件可以在引用子组件的时候,通过 属性绑定(v-bind)的形式,把 需要传递给子组件的数据,
                以属性绑定的形式绑定到子组件内部, 供子组件使用 -->
            <com1 v-bind:parentmsg="msg"></com1>
            <com1 v-bind:parentmsg="msg2"></com1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    msg: "这是父组件中的数据",
                    msg2: "第二条父组件中的数据"
                },
                methods: {
    
                },
                components: {
                    //默认子组件无法访问到 父组件中的data上的数据和methods方法
                    com1: {
                        template: '<h1>这是子组件 --- {{parentmsg}}</h1>',
                        props: ['parentmsg'], //把父组件传递过来的 parentmsg 属性,先在 props 数组中,定义一下,这样才能使用
                    }
                }
            });
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述
    总结:其实严格的来说,props是组件的一个属性而非data,因此组件模板在使用props数组中的值的时候,并不知道自己引用的是最终数据是父组件的data中的值,只不过在实例中使用的时候,即时的绑定了父组件的data中的值。

    展开全文
  • 在业务场景中经常会遇到组件向组件传递数值,或是组件向组件传递数值,下面将结合vue富文本框一起来了解一下组件之间的传值 业务场景 在vue项目中创建了一个可以重复使用的富文本编辑器(可参考...

    前言

    在业务场景中经常会遇到子组件向父组件传递数值,或是父组件向子组件传递数值,下面将结合vue富文本框一起来了解一下父与子组件之间的传值

    业务场景

     在vue项目中创建了一个可以重复使用的富文本编辑器(可参考【vue】vue富文本编辑器(可重复使用组件)vue-quill-editor),由于是新闻编辑页面,首先需要把已经保存好的新闻内容展示在富文本编辑器中(父组件向子组件传值),其次需要把更新后的新闻内容保存到数据库中(子组件向父组件传值)

    父组件向子组件传值 (v-bind:child-props)

    1、业务:新闻编辑页面中,把新闻内容传递给子组件富文本编辑器

    2、方法

    <子组件名称  v-bind: 子组件中的props="父组件中的data"></子组件名称>   

    如:<Editor  v-bind:content="parentContent"></Editor> 

    3、实例:

    A、子组件关键代码

     <quill-editor

        class="editor"

        v-model="editorContent"//给富文本编辑器赋值

        ref="myQuillEditor"

        :options="editorOption"

        @blur="onEditorBlur($event)"

        @focus="onEditorFocus($event)"

        @change="onEditorChange($event)"

      ></quill-editor>

    export default {
      props: ["content"],//定义父组件传值的属性content,父组件中可以通过content把数据传递给子组件
      data() {
        return {
          editorOption: {},
          editorContent:this.content //通过props把数据赋值给data,然后通过v-model给富文本编辑器赋值
        };
      },

    B、父组件关键代码

    import Editor from "@/components/VueEditor";// 引入子组件

     <Editor v-bind:content="parentContent" @child-event="parentEvent"></Editor>//通过v-bind:子组件props进行数据的传

    子组件向父组件传值 (@childemit=parentEvent)

    1、业务:在新闻编辑页面中,在富文本编辑器中(子组件)更新内容后,把最新的内容传递给到新闻页面中(父组件)

    2、方法:

    <子组件名称 @子组件中的emit="父组件中的methods"></子组件名称>   

     如:<Editor  @childemit="parentEvent" ></Editor>

    3、实例:

    A、父组件关键代码

     <Editor  v-bind:content="parentContent" @childemit="parentEvent"></Editor>

    //@childemit:通过@定义emit,然后在子组件中通过this.$emit('childemit', value)把value传递给父组件

    //parentEvent:在父组件中定义一个method,在method中可以获取到从子组件传递过来的值

     methods: {

        parentEvent(data) {

          this.parentContent = data;

        },

    B、子组件关键代码

    在富文本编辑器编辑内容的事件中使用  this.$emit('childemit', value)

    methods: {

        onEditorBlur() {},

        onEditorFocus(e) {

          //编辑器获得焦点的事件

          //console.log(e);

        },

        onEditorChange(e) {

          //内容改变事件

         this.$emit('childemit', e.html)

        },

      }

    完整代码

    A、子组件完整代码(富文本编辑器可重用组件)

    <template>
      <quill-editor
        class="editor"
        v-model="editorContent"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
      >
      </quill-editor>
    </template>
    
    <script>
    import { quillEditor } from "vue-quill-editor";
    export default {
      props: ["content"],
      data() {
        return {
          editorOption: {},
          editorContent:this.content
        };
      },
      computed: {
        editor() {
          //console.log(this.$refs.myTextEditor.quillEditor);
          return this.$refs.myTextEditor.quillEditor;
        },
      },
      methods: {
        onEditorBlur() {},
        onEditorFocus(e) {
          //编辑器获得焦点的事件
          //console.log(e);
        },
        onEditorChange(e) {
          //内容改变事件
          this.$emit('childemit', e.html)
        },
      },
    };
    </script>
    
    <style>
    </style>

    B、父组件完整代码(新闻编辑页面)

    <template>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="Id">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="Title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="Content">
          <Editor
            v-bind:content="parentContent"
            @childemit="parentEvent"
          ></Editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">Create</el-button>
          <el-button type="primary" @click="onCancel">Cancel</el-button>
        </el-form-item>
      </el-form>
    </template>
    
    <script>
    import Editor from "@/components/VueEditor";
    export default {
      components: {
        Editor,
      },
      data() {
        return {
          form: this.$store.state.newsitem,
          parentContent: this.$store.state.newsitem.content,
        };
      },
      methods: {
        parentEvent(data) {
          this.parentContent = data;
        },
        onSubmit() {
          let form = this.form;
    
          const restweburl = "http://localhost:5000/";
          const requestOptions = JSON.stringify({
            id: 1,
            title: form.title,
            publishDate: "2020-10-10",
            pageUrl: form.pageUrl,
            content: this.parentContent,
            author: null,
          });
            console.log('1133');
          console.log(requestOptions);
    
          /*
          this.$axios
            .post(restweburl + "api/Article/UpdateNews", requestOptions)
            .then(function (res) {
              console.log(res);
            })
            .catch(function (err) {
              console.log(err);
            });
          console.log("submit!");*/
        },
        onCancel() {
          this.$router.push({ path: "/" });
        },
      },
    };
    </script>
    
    <style>
    </style>

     

    至此,根据业务场景将vue间的传值过了一遍,如上描述如有错漏,请大家评论区及时指出,多谢

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • 本片文章将为您详细讲解在Vue中,父给传值、父传值以及兄弟之间传值方式! 父传;父组件 // template里面 <aa :info="name"/> // script里面 import aa from './aa.vue' components:{ aa }, data...
  • vue 组件传值父组件 emit <div id="app"> {{ message }} {{ books }} <children_fei :children_message="message" :children_books="books"></children_fei> </div> <template id=...
  • 为啥这点东西需要一周时间:1、首先是水平一般,能力有限,前后端都是半吊子,再加上最近有点松劲了;2、由于前期规划问题,在做...附加一段VUE子父组件传送数据的demo:父组件向子组件传值父组件:<template&g...
  • vue子父类传值

    千次阅读 2019-04-16 09:42:09
    vue子父类传值 传子 子组件(接收方)在vue对象中,通过props属性声明,声明他期待获得的数据 props:[“commentId”], 组件(发送方)注册子组件,在使用子组件的时候,以键值对的方式传递给子组件, :...
  • 1.组件向组件传值 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport"...
  • ———————————————组件传组件————————————————————— 组件 <DeviceUpdate :childImgUrl="childImgUrl"/> import DeviceUpdate from './devicearrivecheckdetail-...
  • vue子父组件传值

    2019-07-08 11:09:00
    https://blog.csdn.net/weixin_38888773/article/details/81902789 ... 子父传值打油诗一首: 儿子有个小秘密 儿子@click方法里放个$emit第一个参数事件E第二个参数小秘密老爸先把儿子导导完componen...
  • Vue子父组件传值

    2021-04-01 18:11:07
    组件向组件传值组件引入组件 Vue.component('son-item',{ // props:['title'], data(){ return { submsg:'组件数据' } }, template:'<div>{{submsg+"---"+title}}</div>' }) ...
  • 首先,在组件调用组件product,定义一个on的方法监听组件的状态 <Product v-for="(item,index) in orderList" :key="index" :item="item" @gobtn_cancel="gos"></Product> 在组件中:假设有...
  • 这篇来说说组件传值组件的 ——this.$emit('xxx属性',xxx参数); 组件: //组件自定义一个按钮触发onSubmit()方法; <el-form-item> <el-button type="primary" @click="onSubmit">立即...
  • 组件向组件传值 具体代码如下: // <template> <div> <value-header :detail=detail></value-header> </div> </template> <script> import ValueHeader ...
  • vue 组件传值子组件() 使用prop属性,(借助v-bind绑定) <div id="app"> {{ message }} {{ books }} <children_fei :children_message="message" :children_books="books"></children_...
  • 组件传值组件向组件传值: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"&...
  • vue父子组件传值组件向组件传值(props) 定义组件 2.定义组件 关键点: 1.组件想要向组件传值,那么需要在组件引入的地方绑定要传的值,并且要在组件中引入组件。 2.绑定的值可以是一个...
  • vue 子父组件传值

    2020-02-11 19:21:57
    就学这一遍 在此附上我的QQ: 2489757828 有问题的话可以一同探讨 ...首先你得有子父组件,并将子组件进行引用 ************ 父给子传值 ************ 父组件 <template> <div class="parent"> &...
  • 组件通过props接收组件传递过来的参数 主动获取值 组件里注册的组件标签里写上ref 在mounted声明周期函数里打印this.$refs.name.msg即可 效果图 // 组件 <template> <div> <...
  • 非常简单: ...组件引用组件是,定义收到这个方法时,执行的组件方法 <subcomp @func1="func2"/> 其中func2是组件的method,func2可以获取一个参数,便是组件传过来的参数 ...
  • 组件为一个switch开关,通过switch的开关来控制组件div的背景颜色 以下为示例代码: 组件代码: <template> <div> <!--用到的是iview的switch开关--> <i-switch @on-change=...
  • 父子传值父组件引入组件并注册在标签通过动态绑定data里的值组件通过props接收组件传递过来的参数主动获取值组件里注册的组件标签里写上ref在mounted声明周期函数里打印this.$refs.name.msg即可效果图// ...
  • 2,通过组件传值组件值方法,组件通过该方法将值传给组件,下面贴代码方便理解 组件内 &lt;template&gt; &lt;mescroll-vue ref="mescroll" :down="mescrollDown" :...
  • 下述组件传值指引用类型(数组或对象)传值。准备:单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到组件中,但是反过来则不行。这样会防止从组件意外变更...

空空如也

空空如也

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

vue子父传值

vue 订阅