zoukankan html css js c++ java

Vue父子组件之间传值

一、父组件向子组件传值：

在父组件中调用子组件时，使用v-bind将要传的值进行绑定
```
<com :parentmsg="msg"></com>
```
在子组件的props中，添加第一步中为接收父组件数据而定义的变量
```
props: ["parentmsg"]
```
子组件可使用 this.parentMsg 来调用父组件的数据 msg

二、子组件向父组件传值：

父组件中先定义一个方法a用来获取子组件的值

methods: {
                getChildMsg (data) {
                    this.childMsg = data
                }
            },

在父组件中调用子组件时，将父组件的那个方法与子组件中的一个方法b绑定
```
        <com :parentmsg="msg" @func='getChildMsg'></com>
```
在子组件中定义另一个方法c来处理用于绑定父组件方法的方法b，方法c 使用 $emit，第一个参数为方法b的名称，第二个参数为要传递给父组件的值
```
methods: {
                sendToParent () {
                    this.$emit('func', this.msg)
                },
            },
```

在子组件中用合适的方法调用 c 实现向父组件传值

created() {
                this.sendToParent()
            },

父组件可使用 this.childMsg 来调用子组件的数据 msg

实例代码：

 1 <body>
 2     <div id="app">
 3         <com :parentmsg="msg" @func='getChildMsg'></com>
 4         <!-- 在父组件中可调用子组件中的数据 -->
 5         <h2>{{childMsg}}</h2>
 6     </div>
 7 
 8     <template id="tmp">
 9         <div>
10             <!-- 在子组件中可调用父组件中的数据 -->
11             <h1>子元素模板---{{parentmsg}}</h1>
12         </div>
13     </template>
14 
15     <script>
16         // 创建模板
17         let com = {
18             template: '#tmp',
19             data() {
20                 return {
21                     msg: "子组件中的数据"
22                 }
23             },
24             methods: {
25                 sendToParent () {
26                     this.$emit('func', this.msg)
27                 },
28             },
29             created() {
30                 this.sendToParent()
31             },
32             props: ["parentmsg"]
33         }
34 
35         // 创建Vue实例
36         let vm = new Vue({
37             el: "#app",
38             data: {
39                 msg: "父组件中的数据",
40                 childMsg: ''
41             },
42             methods: {
43                 getChildMsg (data) {
44                     this.childMsg = data
45                 }
46             },
47             components: {
48                 com
49             }
50         })
51     </script>
52 </body>

查看全文

相关阅读:
python __builtins__ set类（60）
python __builtins__ reversed类（58）
python __builtins__ range类（56）
python __builtins__ property类（55）
python __builtins__ memoryview类（46）
python __builtins__ map类（44）
python __builtins__ list类（42）
python __builtins__ license类（41）
（转）面试算法总结
 (Mark)JS中的上下文

原文地址：https://www.cnblogs.com/Ryan368/p/11331801.html