精华内容
下载资源
问答
  • 这篇文章主要为大家详细介绍了vue里面v-bind和Props 利用props绑定动态数据的方法,具有一定的参考价值,可以用来参考一下。感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!如下所示:代码如下:代码...

    这篇文章主要为大家详细介绍了vue里面v-bind和Props 利用props绑定动态数据的方法,具有一定的参考价值,可以用来参考一下。

    感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!

    如下所示:

    代码如下:

    代码如下:

    var vm = new Vue({

    el: '#app',

    data: {

    h: "hello"

    },

    components: {

    "add": {

    props: ['btn'],

    template: "btn:{{btn}}",

    data: function () {

    return {'btn': "123"}; //子组件同名的值被覆盖了

    }

    }

    }

    });

    说明:

    【1】btn使用的父组件data中 h的值;

    【2】子组件的data的函数中返回值被覆盖了。

    【3】也就是说,使用v-bind的是使用父组件的值(根据属性名),没有使用v-bind的是将标签里的数值当做字符串来使用。

    【4】依然需要使用props,否则他会取用自己data里的btn的值

    以上这篇vue里面v-bind和Props 利用props绑定动态数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持512笔记。

    注:关于vue里面v-bind和Props 利用props绑定动态数据的方法的内容就先介绍到这里,更多相关文章的可以留意512笔记的其他信息。

    关键词:vue.js

    展开全文
  • 今天小编就为大家分享一篇vue里面v-bind和Props 利用props绑定动态数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue动态修改组件里的props的数据

    千次阅读 2019-07-21 13:29:20
    传递数据给组件的方式 //父组件的代码 <regist-form :email="email" ref="fo"></regist-form> data(){ return{ ...组件的props设置 //子组件的代码 props:['email'], data () { ...

    传递数据给组件的方式

    //父组件的代码
     <regist-form :email="email" ref="fo"></regist-form>   
      data(){
          return{
           email:'haha'
          }
    

    组件的props设置

    //子组件的代码
    props:['email'],
         data () {
                return {
                        userEmail: this.email,
                    },
    

    想修改email的数据就需要添加ref,然后在改变时触发组件里的方法

    //父组件的代码
    this.$refs.fo.resetEmail();
    
    //子组件的代码
                resetEmail(){
                    this.formValidate.userEmail=''
                }
    
    展开全文
  • vue props

    千次阅读 2017-09-06 14:59:12
    #props 用于接收来自父组件的数据(子组件期待获得的数据) 类型:字符串数组或者object e.g. 数组:props: ['size', 'myMessage'] 对象: props: { // 只检测类型 height: Number, // 检测类型 + 其他...


    #props

    用于接收来自父组件的数据(子组件期待获得的数据)

    类型:字符串数组或者object

    e.g.

    数组:props: ['size', 'myMessage']
    对象:
     props: {
        // 只检测类型
        height: Number,
        // 检测类型 + 其他验证
        age: {
          type: Number,
          default: 0,
          required: true,
          validator: function (value) {
            return value >= 0
          }
        }
      }

    HTML 特性是不区分大小写的。所以,当使用的不是字符串模板,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名:

    父组件:

    <!-- kebab-case in HTML -->
    <child my-message="hello!"></child>
    子组件:

      // camelCase in JavaScript
      props: ['myMessage'],

    #动态Prop

    要动态地绑定父组件的数据到子模板的 props需要使用v-bind,这样每当父组件的数据变化时,该变化也会传导给子组件。


    #字面量语法vs动态语法

    父组件:

    <!-- 传递了一个字符串 "1" -->
    <comp some-prop="1"></comp>

    =右边是字符串”1”而不是number。如果想要传递一个number,需要使用v-bind,从而让它的值被当作js表达式计算

    <!-- 传递实际的 number -->
    <comp v-bind:some-prop="1"></comp>
    

    字面量分为字符串字面量(string literal )、数组字面量(array literal)和对象字面量(object literal),另外还有函数字面量(function literal)。

    Prop中的数据

     1.prop 作为初始值传入后,子组件想把它当作局部数据来用;
    定义一个局部变量,并用 prop 的值初始化它:

    子组件:

    props: ['initialCounter'],
    data: function () {
      return { counter: this.initialCounter }
    }

     2.prop 作为初始值传入,由子组件处理成其它数据输出。
    定义一个计算属性,处理 prop 的值并返回。

    子组件:

    props: ['size'],
    computed: {
      normalizedSize: function () {
        return this.size.trim().toLowerCase()
      }
    }

    注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。


    #prop验证

    子组件:

      props: {
        // 基础类型检测 (`null` 意思是任何类型都可以)
        propA: Number,
        // 多种类型
        propB: [String, Number],
        // 必传且是字符串
        propC: {
          type: String,
          required: true
        },
        // 数字,有默认值
        propD: {
          type: Number,
          default: 100
        },
        // 数组/对象的默认值应当由一个工厂函数返回
        propE: {
          type: Object,
          default: function () {
            return { message: 'hello' }
          }
        },
        // 自定义验证函数
        propF: {
          validator: function (value) {
            return value > 10
          }
        }
      }

    注意 props 会在组件实例创建之前进行校验,所以在 default  validator 函数里,诸如 datacomputed  methods 等实例属性还无法使用。


    #非父子组件通信

    有时候两个组件也需要通信 (非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线:

    var bus = new Vue()
    
    // 触发组件 A 中的事件
    bus.$emit('id-selected', 1)
    
    // 在组件 B 创建的钩子中监听事件
    bus.$on('id-selected', function (id) {
      // ...
    })
    


    展开全文
  • Vue子组件中 data 从props动态更新数据 考虑这样一种情况,Vue 的父组件根据接口 api 获取到数据后,动态更新到子组件的 props 上,这本身也是一个较为简单的操作, // 父组件 <template> <div class=...

    Vue子组件中 data 从props中动态更新数据

    考虑这样一种情况,Vue 的父组件根据接口 api 获取到数据后,动态更新到子组件的 props 上,这本身也是一个较为简单的操作,

    // 父组件
    <template>
      <div class="hello">
        <chart :info='info'/>
      </div>
    </template>

     

    在子组件上把数据,直接渲染到模型上即可。

    复制代码

    // 子组件
    <template>
      <div class="hello">
        <ul>
          <!-- 此处 info 来自 props -->
          <li v-for="i in info" :key='i'>{{i}}</li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      props:['info'],
      data () {
        return {
          list:[],
        }
      },
      mounted(){
        this.list = this.info.map(i => '0_'+i)
      },
    }
    </script>

    复制代码

     

    走到这一步,都很顺利,用 一个 list 数据进行动态更新。但如果需要对子组件上的数据进行操作再利用 组件 data 渲染,这时就会发现数据不能动态更新。

    复制代码

    // 子组件
    <template>
      <div class="hello">
        <ul>
          <!-- 此处 list 来自 data -->
          <li v-for="i in list" :key='i'>{{i}}</li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      props:['info'],
      data () {
        return {
          list:[],
        }
      },
      mounted(){
        this.list = this.info.map(i => '0_'+i)
      },
    }
    </script>

    复制代码

    这里需要用 watch 来进行跟踪,如下即可

    复制代码

    // 子组件
    <template>
      <div class="hello">
        <ul>
          <!-- 此处list 来自 data -->
          <li v-for="i in list" :key='i'>{{i}}</li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      props:['info'],
      data () {
        return {
          list:[],
        }
      },
      mounted(){
        this.list = this.info.map(i => '0_'+i)
      },
      watch: {
        info() {
          this.list = this.info
        }
      }
    }
    </script>

    复制代码

     

    后记:

    以上操作其实也是走了一些弯路,对于这种 通过对 props 数据操作再赋值给 子组件 data ,导致子组件 data 不能根据 父组件传值变化而及时更新数据的情况。直接用计算属性  computed  : list 

    复制代码

    // 子组件
    <template>
      <div class="hello">
        <ul>
          <!-- 此处comp 来自 computed -->
          <li v-for="i in comp" :key='i'>{{i}}</li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      props:['info'],
      computed: {
        comp (){
          return this.info.map(i => '0_'+i)
        }
      },
    }
    </script>

    复制代码

    如上即可

    展开全文
  • vue动态修改title

    2019-09-05 11:28:00
    ...新建vue指令 在对应的vue页面添加 $title}"> $title --> 标题内容 Vue.directive( ' title ' , { inserted: function (el, binding) { document.title = el.dataset.title } })  
  • vue动态改变:disabled的属性值

    千次阅读 2020-05-28 11:59:48
    动态改变:disabled的属性值 找了很久,可能没人提这么弱智的问题哭唧唧,所以我自己琢磨了很久,终于啊。。 首先:先把那个none改为一个可以修改的值,这里我随便起的也叫disabled <date-picker v-model="time1...
  • 可在动态路由对象里面再加一个属性,props:true。用于将动态值传到,相应使用的组件上。相应组件用props接收。 props的几种写法: 数组型:props: [‘title’, ‘likes’, ‘isPublished’, ‘commentIds’, ...
  • 组件props信息的修改
  • Vue基础之props

    2021-07-16 09:20:11
    Vue基础之Props
  • VUE学习之props

    2019-09-08 17:46:11
    Props一个Vue单文件组件里面的选项,它接收从父组件传递过来的数据, 被称之为静态数据,说道这里肯能就有小伙伴就会疑问什么是静态数据,什么是动态数据,在Vue项目中,在其自实例中,一旦在初始化后props中的数据...
  • vue props传值

    2020-12-10 16:34:08
    父组件通过props 把值传递给子组件 在子组件内部不能直接修改父组件传递过来的值------------- 子组件可以通过 this.$emit(“方法”); 让父组件来修改值 子组件内 父组件内 methods中
  • vue 子组件修改props方法

    千次阅读 2021-03-07 19:58:18
    vue是单向数据流,父组件通过props传值给子组件,如果在子组件中修改会报错,一般是不在子组件中修改props的,但偶尔有需要在子组件有修改props,这里介绍三种可以修改子组件props的方法。 1.父组件用sync修饰,子...
  • vue 动态修改组件style中的参数

    千次阅读 2020-04-09 17:27:37
    CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),具体的自己去了解吧,这里就不详解了。 以背景颜色为例: ... <template>...div class="father" ref="bgcolor">... 动态修改style中的参数 ...
  • vue修改props传进来的值

    千次阅读 2020-01-27 21:52:02
    总所周知,vue是单向数据流,一般我们也不会在子组件里面修改父组件传进来的值,但总有需要修改的时候。 前段时间一个项目中有遇到上述情况,假设我直接传进来一个list,当时我直接在里面改了list,但是却惊讶的...
  • vue3中子组件改变props

    千次阅读 2021-05-10 16:08:08
    周所周知vueprops是单向数据流,可以从父组件中改变传往子组件的props,反之则不行,所以在vue2时,用.sync修饰符搭配配合$emit可以实现子组件改变props,如下 //父组件中 <Toast :show.sync="shows" ...
  • 主要介绍了Vueprops值实时传递 并可修改的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 如下所示: <!DOCTYPE html> <html lang=en xmlns:v-on=http://www.w3.org/1999/xhtml> <head> <meta charset=UTF-8> <title>Title</title>...child v-bind:my-message
  • Vue props用法小结

    千次阅读 2018-11-14 16:07:19
    Vue props用法详解 组件接受的选项之一 propsVue 中非常重要的一个选项。父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。 ...
  • Vue组件选项props

    2019-04-03 13:44:27
    Vue组件选项props 前面的话  组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项。在 Vue 中,父子组件的关系可以总结为props down, events up。父组件通过props向下传递数据给子组件...
  • Vue props数据传递

    千次阅读 2019-06-01 16:14:16
    组件接受的选项大部分与 Vue实例一样,而选项props是组件中非常重要的一个选项。在Vue中,父子组件的关系可以总结为 props down,events up。父组件通过props向下传递数据给子组件,子组件通过events给父组件发送...
  • VueProps问题集合

    2019-11-04 21:28:05
    i. props中的属性是只读的,一旦属性生成之后便不能够直接为其赋值,可以通过动态绑定的方法间接改变属性的值;data中的属性值是可读可写的,可以直接为其赋予新的值; ii. 调用props中的属性的时候只需直接引用,...
  • vue props 传值

    2020-05-18 10:04:17
    一、子组件需要做的子组件要显式地用 props 选项声明它期待获得的数据...这个时候静态传值就完成了动态在父组件使用子组件标签时<tem v-bind: data="myData"></tem>data(){ return{ myData:"hah
  • this.isShow = val 直接报错 this.$emit('update:isShow',val) 可以
  • 在div中 使用 :style="{'属性':值}" 的格式进行动态设置css的属性 <template> <div class="courseitem"> <div class="color" :style="{'background':examClolr ,'box-shadow': examShadow }">...
  • vue props报错

    千次阅读 2018-08-09 14:06:17
    点击切换的时候要改变pageType的值 会报如下错误 解决方案如下: 原因: 1、避免直接更改一个prop,因为每当父组件重新呈现时,该值就会被覆盖。 2、改正后,在组件内部再构建一套属性域,从而与...
  • vue组件选项props

    2018-10-13 11:10:45
    组件接受的选项大部分与vue实例一样,而选项props是组建中非常重要的一个选项。在vue中,父子组件的关系可以总结为:  props down,events up.  父组件通过props向下传递数据给子组件,子组件通过events给父组件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,094
精华内容 14,837
关键字:

propsvue动态修改

vue 订阅