服务器之家

服务器之家 > 正文

Vue中父子组件的值传递与方法传递

时间:2021-10-18 17:33     来源/作者:WanGqD

一.Vue中父组件向子组件传值

利用v-bind向子组件传值,子组件中利用props接受

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div id="app">
  <father></father>
</div>
<template id="father">
  <div>
    <!--注意点: 组件是可以使用自己的数据的-->
    <p>{{name}}</p>
    <p>{{age}}</p>
    <!--这里将父组件的name通过parentname传递给了子组件-->
    <son :parentname="name" :abc="age"></son>
  </div>
</template>
<template id="son">
  <div>
    <!--这里通过parentname使用了父组件传递过来的数据-->
    <p>{{parentname}}</p>
    <p>{{abc}}</p>
  </div>
</template>
<script>
  // 父组件
  Vue.component("father", {
    template: "#father",
    data: function(){
     return {
       name: "wqd",
       age: 21
     }
    },
    // 子组件
    components: {
      "son": {
        template: "#son",
        //这里通过parentname接收了父组件传递过来的数据
        props: ["parentname", "abc"]
      }
    }
  });
  // 这里就是MVVM中的View Model
  let vue = new Vue({
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
    },
  });
</script>

二.Vue中父组件向子组件传递方法

父组件利用v-on传值,子组件this.$emit来接收

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div id="app">
  <father></father>
</div>
<template id="father">
  <div>
    <button @click="say">我是按钮</button>
    <!--这里通过parentsay将父组件的say方法传递给了子组件-->
    <son @parentsay="say"></son>
  </div>
</template>
<template id="son">
  <div>
    <button @click="sonFn">我是按钮</button>
  </div>
</template>
<script>
  // 父组件
  Vue.component("father", {
    template: "#father",
    methods: {
      say(){
        console.log("helloworld")
      }
    },
    // 子组件
    components: {
      "son": {
        template: "#son",
        /*
        注意点: 和传递数据不同, 如果传递的是方法, 那么在子组件中不需要接收,需要在子组件自定义的方法中通this.$emit("自定义接收的名称")的方法来触发父组件传递过来的方法
        */
        // props: ["parentsay"]
        methods: {
          sonFn(){
            this.$emit("parentsay");
          }
        }
      }
    }
  });
  // 这里就是MVVM中的View Model
  let vue = new Vue({
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
    },
  });
</script>

三.Vue中子组件向父组件传值

this.$emit中第一个参数为接收父组件传递的方法,第二个参数即为向父组件传递的值

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div id="app">
  <father></father>
</div>
<template id="father">
  <div>
    <button @click="say">我是按钮</button>
    <!--这里通过parentsay将父组件的say方法传递给了子组件-->
    <son @parentsay="say"></son>
  </div>
</template>
<template id="son">
  <div>
    <button @click="sonFn">我是按钮</button>
  </div>
</template>
<script>
  // 父组件
  Vue.component("father", {
    template: "#father",
    methods: {
      //data用来接受子组件传递的值
      say(data){
        console.log(data);
      }
    },
    // 子组件
    components: {
      "son": {
        template: "#son",
        methods: {
          sonFn(){
            // 第一个参数: 需要调用的函数名称
            // 后续的参数: 给调用的函数传递的参数
            this.$emit("parentsay", "你好");
          }
        }
      }
    }
  });
  // 这里就是MVVM中的View Model
  let vue = new Vue({
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
    },
    
  });
</script>

到此这篇关于Vue中父子组件的值传递与方法传递的文章就介绍到这了,更多相关Vue父子组件传递内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://segmentfault.com/a/1190000025147143

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部