vue子组件更改属性

严格来说,Vue子组件不能随便更改父组件传递过来的属性,但是可以这样修改

父组件

1 <component-a :num.sync="number">这是子组件</component-a>

子组件

 1 <template>
 2   <div>
 3     <p @click="change">子属性{{num}}</p>
 4   </div>
 5 </template>
 6
 7 <script>
 8     export default {
 9         name: "ComponentA",
10         props: {
11           num: Number
12         },
13         methods: {
14           change(){
15             this.$emit(‘update:num‘, 10)
16           }
17         }
18     }
19 </script>

原文地址:https://www.cnblogs.com/wlxian/p/11028076.html

时间: 2024-08-23 20:53:13

vue子组件更改属性的相关文章

Vue 子组件调用父组件 $emit

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue 子组件调用父组件 $emit</title>    </head>    <body>        <div id="app">            <table border="2

通过props设置vue子组件的显示与隐藏

最近项目在使用antd组件库做项目,页面中大量使用了a-modal弹窗.但是由于a-modal不能满足实际项目中的结构需要.为了方便复用,所以需要围绕a-modal进行二次封装.由此便引发了'如何通过props设置vue子组件的显示与隐藏'.其实主要问题是vue本身为了保证单向数据流,所以在子组件内部不能直接修改props. 1.1父组件代码 1.2子组件代码 1.3代码说明 (1)首先在父组件内给子组件的标签绑定一个自定义属性visible,默认值为false,父组件内的按钮事件可以修改vis

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子组件向父组件传值

vue2.0中通过$emit事件在子组件中自定义事件,通过操作子组件中的事件,向父组件传递参数: 首先写一个叫做parentComp.vue的父组件: <template> <div> <childComp01 :fromParentToChild="fromParentToChild" :isShow="show" @showParentComp="eventFromChild"></childComp

vue子组件向父组件传递数据

子组件 <template> <div id="header"> <input type="text" v-model="username" @change="setUser"> </div> </template> <script type="text/ecmascript-6"> export default{ props: { }

Vue 子组件接收父组件的值

1.父组件 <template> <div id="rightmenu8"> <rightmenu7 ref="rightmenu7" @child="parent3" :age="age"></rightmenu7> </div> </template> <script> import rightmenu7 from "./Righ

Vue:子组件如何跟父组件通信

我们知道,父组件使用 prop 传递数据给子组件.但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了. 使用 v-on 绑定自定义事件 每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) 监听事件 使用 $emit(eventName, optionalPayload) 触发事件 Vue 的事件系统与浏览器的 EventTarget API 有所不同.尽管它们运行起来类似,但是 $on 和 $emit 并不是addEventListener 和

vue 子组件传值给父组件

子组件通过this.$emit("event",[args,....]),传值给父组件 HTML部分: 1 <div id="app"> 2 <tmp1 @func="test"></tmp1> 3 </div> JS部分: 1 var app = new Vue({ 2 el: "#app", 3 data: {}, 4 methods: { 5 test(data) { 6

vue子组件修改父组件传递过来的值

这里不再赘述父子组件及子父组件传值,不懂的同学可以翻看我以前写过的关于两者传值的文章 父子组件传值:https://www.cnblogs.com/Sky-Ice/p/9267192.html 子父组件传值:https://www.cnblogs.com/Sky-Ice/p/9289922.html 直接进入正题,把一个布尔值传递给子组件,然后,在子组件中修改该值,会报错 Avoid mutating a prop directly since the value will be overwri