【Vue】组件watch props属性值

#HTML<div id="example">
  <p>
    <child :msg="msg"></child>
  </p>
  <p>
    <button @click=‘props‘>改变props</button>
  </p>
</div>
#JS
Vue.component(‘child‘, {
  props: [‘msg‘],
  computed: {
    value:{
      get:function(){
        return this.msg
      },
      set:function(value){
        this.msg = value;
      }
    }
  },
  watch:{
      msg:function(val,oldval){
      this.value=‘改变子组件msg‘;
    }
  },
  template: ‘<span>{{ value }}</span>‘
})

var vm=new Vue({
    el:‘#example‘,
  data:function(){
      return{
        msg:‘默认子组件msg‘
    }
  },
  methods:{
        props:function(){
        this.$set(‘msg‘,‘2‘);
    }
  }
})

代码:https://jsfiddle.net/kakarrot2009/ebeqhr6x/

原文地址:https://www.cnblogs.com/mqxs/p/8972368.html

时间: 2024-10-08 19:01:40

【Vue】组件watch props属性值的相关文章

Vue组件选项props

前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据

创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `function`的形式在创建,并且该组件是无state状态的.具体的创建形式如下 1 import React from 'react '; 2 3 //定义一个React组件 4 function App() { 5 return ( 6 <div> 7 hello React... 8 </div

React Native入门(三)组件的Props(属性)和State(状态)

相关文章 React Native入门系列 前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性.样式等等.同样的,React Native中的组件也有属性.样式和状态. 1.Props(属性) 组件创建时会设置一些参数来定制这个组件,这些参数就是属性,属性一旦设定,在组件的生命周期中就不会改变.下面拿Image的source属性和Text的onPress属性作为举例. Image的source属性 import React, {Component} from 're

组件的props属性和state状态

props属性: 我使用代码来说明React中props属性: // Profile.jsx import React from 'react' ; export default Class Profile extends React.Component { // render 是这个组件渲染的Vitrual DOM结构 render() { return ( <div className-"profile-component"> </*this.props就是传入的

vue组件的inheritAttrs属性

vue官网对于inheritAttrs的属性解释:如果你不希望组件的根元素继承特性,你可以在组件的选项中设置 inheritAttrs: false. 可能不是很好理解,我们可以举个例子来验证一下. 父组件 parent-component.vue <template> <div class="parent"> <child-component aaa="1111"></child-component> </di

vue 组件属性props,特性驼峰命名,连接线使用

今天在学习vue的时候碰到了一个有趣的问题 是这样的,先来个话题引入,后面会用到 var myname={ 'first-name':'9', 'last-name':'l o n g' } console.log(myname.first-name); console.log(myname['first-name']); 打印出来是  NaN  9 解释下,之所以没有前面没有打印出来9,是因为程序走的时候,把我们认为的英文连接符当做减号看待,myname.first是undefined,nam

vue组件最佳实践

看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的.1.让开发者和开发团队更容易发现一些事情.2.让你更好的利用你的IDE.3.让你更加容易的使用打包工具4.让你的代码更容易碎片化以达到复用的目的. 基于模块开发 用一些功能单一的小模块来组织你的应用 Why? 对于你自己和你团队的人来说较小的模块更容易看懂 维护 复用和调试. How? 每个组件应该保持单一 独立 可复用 可测试把你很大的组件拆

vue组件相关内容

说明 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,组件系统让我们可以用独立可复用的小组件来构建大型应用. 定义方法 这是官网给出的一种定义组件的方法 一下是我目前使用的方法,以下内容都是按照此方法定义组件的.(因为这样可以使模板和组件分开) 定义组件前首先要定义一个模板,这是定义模板的一种方式 这是定义模板的另一种方式 接下来定义组件 这里有几个注意事项: 1.定义模板时,模板里只能有一个顶层标签. 2.定义组件时,不能使用H5标

vue学习——刚学Vue组件,吐槽一个东西

Vue组件的props是用来传值的 这里是官方链接 template:"<bbb @click='onClick()'>{{value}}</bbb>", //"<div>{{value}}</div>" 讨厌的东西就出在这行代码,一个组件的 template 调用同级别的组件 bbb 然后使用 props 传值,结果是行不通的,并且没有报错!虽然,明知道是什么问题,可是还是令我感到不舒服. 测试代码: <!DO