vue 单向数据流,不应该更改父组件传过来的数据

那么按照标题这样的话,就如同是 这样 data(){name:this.dataf}  this.dataf就是父组件的值  然后把这个值 相当于赋值给 name: this.dataf 然后更改组件里面的data 数据就好了

看例子

<body>

<div id="app">

<h3>父组件中使用了count</h3>

<p>{{count}}</p>

<custom-component :count="count" @increment-click="countHandle"></custom-component>

</div>

<script>

//自定义事件

//全局组件

//count传入的类型为Number

Vue.component(‘custom-component‘,{

props:{

count:{

//type:Number,

//type:[Number,String],

//default:10

//required:true

validator:function (value){

console.log(value);

return value > 10

}

}

},

data(){

return {

incrementCount:this.count //作为局部这个组件的data的初始值

}

},

computed:{

incrementCount2(){

return this.incrementCount

}

},

template:`

<div>

<h2>我是一个自定义的组件</h2>

<input type="button" value="改变count的值" @click="changeCount" />

{{incrementCount2}}

</div>

`,

methods:{

changeCount(){

this.incrementCount++;

//通知父组件 发生了改变

this.$emit("increment-click")

}

}

})

new Vue({

el:"#app",

data:{

count:20

},

methods:{

countHandle(){

//alert("子组件点击了");

this.count++;

}

}

})

</script>

</body>

原文地址:https://www.cnblogs.com/blccy/p/8215229.html

时间: 2024-10-11 12:19:35

vue 单向数据流,不应该更改父组件传过来的数据的相关文章

Vue 子组件向父组件传参

直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"><

详解vue父组件传递props异步数据到子组件的问题

案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-data="asyncData"></child> </div> </template> <script> import child from './child' export default { data: () => ({ as

vue--父组件向子组件传参--父组件定义v-bind:参数名--子组件接收props----子组件调用父组件的方法(子组件向父组件传参)父组件@事件名称--子组件接收this.$emit

<!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" con

Taro 中父组件传多个值到子组件, 不同页面传值, 子组件修改父组件值

1.父子组件传值需借助 中间ts文件 hook/context-manager.tsx // 使用hook给父子组件共享数组 import { createContext } from "@tarojs/taro"; export default createContext({}); 2.父组件 import TripContext from '../../hook/context-manager' import Trip_success from '../../components/

浅谈VUE,使用watch方法监听父组件传到子组件的数据。

props:['updateData'], data(){ return{ form: { _name:'', }, } }, 第一步接收数据: props:['updateData'] 第二步动态改变值: mounted(){ this.form._name = this.updateData._name; }, 第三步使用watch监听 updateData数据 watch:{ updateData: function (newVal ,oldVal){ //不能用箭头函数 this.for

react父子组件通讯-----&gt;下面用到的ref属性调用子组件的方法,可以实现子组件往父组件传递参数,可以通过在父组件的方法中调用子组件的方法,通过返回值来拿到值,也可以在子组件中,对数据处理完后,调用父组件传给子组件的参数或者方法,来实现传参,

<scripttype="text/babel"> var Child =React.createClass({ getInitialState: function() { return {color:"",childMsg:"我是子组件的信息"}; }, changeColor: function(e) { this.setState({color:e.target.getAttribute("data-color&quo

JS:字符串转成json数据,和json转成字符串方法 iframe获取父级传过来的数据

字符串转成json数据,和json转成字符串方法 //转为JSON adinfo=JSON.parse(adinfo) //转为字符串 adinfo=JSON.stringify(adinfo) 大概流程: var gdt_adinfo=[]; 父级页面通过接口获取的数据: this.url="http://gjs.adwo.com/gjs/gad_i?sdkVersion="+sdkVersion+"&n=1&gp="+gp; 获取数据后处理的方法

NO17--vue父子组件间单向数据流的解决办法

在上一篇中讲解了父子组件之间是如何传值的,如果子组件需要改变传过来的数据供自己使用,或者想在子组件中改变传过来的数据并同步到父组件,那么直接改肯定是不行的,如果你这么做了,Vue 会在控制台给出警告. 对应这两种情况,解决方式如下: 先创建项目并运行 vue init webpack-simple templatecd templatenpm inpm run dev 一. 子组件需要改变传过来的数据供自己使用 1. 定义一个局部变量,并用 props 的值来初始化它 在 App.vue 中 <

VUE里子组件获取父组件动态变化的值

在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件. 比如想实现一个switch开关按钮的公用组件: 1.父组件可以向按钮组件传递默认值. 2.子组件的操作可以改变父组件的数据. 3.父组件修改传递给子组件的值,子组件能动态监听到改变. 比如父组件点击重置,开关组件的状态恢复为关闭状态: 方法1: 1.因为存在子组件