zoukankan      html  css  js  c++  java
  • vue组件之间传值方式解析

    vue组件之间传值方式解析
    一.父组件传到子组件
    1.父组件parent代码如下:
    <template>
    <div class="parent">
    <h2>{{ msg }}</h2>
    <son psMsg="父传子的内容:叫爸爸"></son> <!-- 子组件绑定psMsg变量-->
    </div>
    </template>
    <script>
    import son from './Son' //引入子组件
    export default {
    name: 'HelloWorld',
    data () {
    return {
    msg: '父组件',
    }
    },
    components:{son},
    }
    </script>
    2.子组件son代码如下:
    <template>
    <div class="son">
    <p>{{ sonMsg }}</p>
    <p>子组件接收到内容:{{ psMsg }}</p>
    </div>
    </template>
    <script>
    export default {
    name: "son",
    data(){
    return {
    sonMsg:'子组件',
    }
    },
    props:['psMsg'],//接手psMsg值
    }
    </script>
    3.效果图如下:

    二.子组件向父组件传值
    通过绑定事件然后及$emit传值
    1.父组件parent代码如下
    <template>
    <div class="parent">
    <h2>{{ msg }}</h2>
    <p>父组件接手到的内容:{{ username }}</p>
    <son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son> <!--绑定自定义事件transfer-->
    </div>
    </template>
    <script>
    import son from './Son'
    export default {
    name: 'HelloWorld',
    data () {
    return {
    msg: '父组件',
    username:'',
    }
    },
    components:{son},
    methods:{
    getUser(msg){
    this.username= msg
    }
    }
    }
    </script>
    2.子组件son代码如下:
    <template>
    <div class="son">
    <p>{{ sonMsg }}</p>
    <p>子组件接收到内容:{{ psMsg }}</p>
    <!--<input type="text" v-model="user" @change="setUser">-->
    <button @click="setUser">传值</button>
    </div>
    </template>
    <script>
    export default {
    name: "son",
    data(){
    return {
    sonMsg:'子组件',
    user:'子传父的内容'
    }
    },
    props:['psMsg'],
    methods:{
    setUser:function(){
    this.$emit('transfer',this.user)//将值绑定到transfer上传递过去
    }
    }
    }
    </script>
    3.效果图如下:

    三、通过Vuex状态管理传值
    1.通过npm加载vuex,创建store.js文件,然后在main.js中引入,store.js文件代码如下:
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex);
    const state = {
    author:'Wise Wang'
    };
    const mutations = {
    newAuthor(state,msg){
    state.author = msg
    }
    }
    export default new Vuex.Store({
    state,
    mutations
    })
    2.父组件parent代码如下:
    <template>
    <div class="parent">
    <h2>{{ msg }}</h2>
    <p>父组件接手到的内容:{{ username }}</p>
    <input type="text" v-model="inputTxt">
    <button @click="setAuthor">传参</button>
    <son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son>
    </div>
    </template>
    <script>
    import son from './Son'
    export default {
    name: 'HelloWorld',
    data () {
    return {
    msg: '父组件',
    username:'',
    inputTxt:''
    }
    },
    components:{son},
    methods:{
    getUser(msg){
    this.username= msg
    },
    setAuthor:function () {
    this.$store.commit('newAuthor',this.inputTxt)
    }
    }
    }
    </script>
    3.子组件son代码如下:
    <template>
    <div class="son">
    <p>{{ sonMsg }}</p>
    <p>子组件接收到内容:{{ psMsg }}</p>
    <p>这本书的作者是:{{ $store.state.author }}</p>
    <!--<input type="text" v-model="user" @change="setUser">-->
    <button @click="setUser">传值</button>
    </div>
    </template>
    <script>
    export default {
    name: "son",
    data(){
    return {
    sonMsg:'子组件',
    user:'子传父的内容'
    }
    },
    props:['psMsg'],
    methods:{
    setUser:function(){
    this.$emit('transfer',this.user)
    }
    }
    }
    </script>
    4.效果图如下:

  • 相关阅读:
    如何在android studio 1.0 启动时设置代理【解决WARN
    【转】如何阅读android源码
    【Android】 BroadcastReceiver详解
    如何在Android app中支持多主题
    从源码角度剖析 setContentView() 背后的机制
    【转】Android EditText的使用及值得注意的地方
    【转】Android应用程序打包时,出现错误:"XXX" is not translated in "af" (Afrikaans), "am" (Amharic), "ar" (Arabic).....
    【转】Fragment对用户可见的判断实践,亲测有效
    【转】从java1到java9每个版本都有什么新特性?
    【转】贝塞尔曲线介绍
  • 原文地址:https://www.cnblogs.com/hanguidong/p/9936509.html
Copyright © 2011-2022 走看看