vue组件传值方式

原创

于 2022-05-15 01:35:38 发布 · 871 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #java进阶 #后端

本文介绍了Vue2中组件间的通信方式，包括父组件向子组件、子组件向父组件以及非父子关系的兄弟组件之间的值传递。详细讲解了各个场景的实现代码，并提到了vue3的相关工作正在进展中。

父组件向子组件传值：

父组件

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" />
        <HelloWorld msg="Welcome to Your Vue.js App" :msg2="msg2" /> <!-- 3.在template写上子组件，msg就是向子组件传的值，也可以用v-bind动态绑定 -->
        
    </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";  // 1.引入子组件

export default {
    name: "App",
    components: {
        HelloWorld,  // 2.注册子组件
    },
    data() {
        return {
            msg2: '动态的值'
        }
    },
};
</script>

子组件

<template>
    <div class="hello">
        msg的值=>{
  
  {msg}}
        <p>msg2的值=>{
  
  {msg2}}</p>
    </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    props: ['msg', 'msg2']   // 4.在子组件中写上porps接收父组件的传过来的参数，可以直接写到template使用，或做其他操作
}
</script>

效果<