vue父子组件传值

悠悠 2022-05-27 10:50 307阅读 0赞

#### 作者：小小字符   链接：https://www.jianshu.com/p/4f2c0acedb04   來源：简书       ####

#### 1.前言 ####

组件是Vue.js最推崇的，也是最强大的功能之一，他的核心目标是为了可重用性高，减少重复性的开发，我们可以把组件代码按着 template、style、script的方式拆分，放置在对应的.vue文件中。组件可以理解我预先定义好的ViewModel类，他的核心包括以下几个：

*  template（模板）最终展示给用户的DOM之间的映射
 *  data（初始数据）
 *  props（接收的外部参数）用于组件之间的数据的传递和共享。参数默认是单项绑定的（父到子），但也可以显示声明为双向绑定。
 *  methods（组件的一些方法）。
 *  生命周期函数 这里不细讲 后期会跟进。

#### 2.组件的使用 ####

之前的一些有关 vue的一些基础知识可以看上一遍文章，这里不再重复。

##### 1）、首先我们在项目中创建一个组件parent.vue 和children.vue两个文件。 #####

父组件：

<template>
        <div>
            <h1>1、组件的引用</h1>
            <h2>我是父组件</h2>
        </div>
    </template>
    
    <script> export default { data(){ return { } }, methods:{ }, components: { } } </script>

子组件：

<template>
        <div>
            <h1>我是子组件（引用）</h1>
        </div>
    </template>
    
    <script> export default { data(){ return { } }, methods:{ } } </script>

接下来我们要做的就是把这个子组件引入到父组件中

import children from './children.vue';

然后我们要做的是在上面的components里面注册一下，之后就可以直接在模板里直接使用组件了。代码如下：

<template>
        <div>
            <h1>1、组件的引用</h1>
            <h2>我是父组件</h2>
            <children></children>
        </div>
    </template>
    
    <script> import children from './children.vue' export default { data(){ return { } }, methods:{ }, components: { children } } </script>

##### 2）、接下来我们要做的是父子组件之间的数据传递 #####

因为组件之间的作用于是相互独立的，所以子组建不能直接引用其他组件的数据，因此vue给我们提供了一些数据传递的方式，常用的有以下几种：

*  props
 *  组件通信
 *  slot

###### 1、父附件向子组件传值（props） ######

（1）、字面量语法  
父组件需要这样修改：

<template>
        <div>
            <h1>1、组件的引用</h1>
            <h2>我是父组件</h2>
            
            <children msg="hello"></children>
        </div>
    </template>
    
    <script> import children from './children.vue' export default { data(){ return { } }, methods:{ }, components: { children } } </script>

在子组件中直接引用我们下面props定义的msg

<template>
        <div>
            <h2>我是子组件（引用）</h2>
            <h2>父子传值（字面量）</h2>
            <p>{
        {msg}}</p>
        </div>
    </template>
    
    <script> export default { props:['msg'], data(){ return { } }, methods:{ } } </script>

（2）、动态语法  
我们需要事先在data里面定义一个变量 name 然后在子组件的标签中 把这个变量通过绑定 赋值给msg1 这就是我们要在props中定义的参数，为了方便这里写在一个组件里。  
父组件：

<template>
        <div>
            <h1>1、组件的引用</h1>
            <h2>我是父组件</h2>
            
            <children msg="hello" :msg1="name"></children>
        </div>
    </template>
    
    <script> import children from './children.vue' export default { data(){ return { name:'Masc' } }, methods:{ }, components: { children } } </script>

子组件：

<template>
        <div>
            <h2>我是子组件（引用）</h2>
            <h2>父子传值（字面量）</h2>
            <p>{
        {msg}}</p>
            <h2>父子传值（动态传值）</h2>
            <p>{
        {msg1}}</p>
        </div>
    </template>
    
    <script> export default { props:['msg','msg1'], data(){ return { } }, methods:{ } } </script>

我们可以在methods中写一些方法 来动态的改变我们定义的变量 name  
props默认是单项绑定 我们可以通过下面的绑定修饰符来改变绑定状态。

*  .sync（双向绑定）
 *  .noce（单词绑定）

<children msg="hello" :msg1="name"></children>
            
            <childen msg="hello" :msg1.sync="name"></childen>
            
            <childen msg="hello" :msg1.once="name"></childen>

###### 2、组件通信 ######

*  $on() 监听事件  
    .$on("你要监听的事件名",function()\{\})
 *  $emit() 触发事件 把事件沿着作用域链向上派发  
    .$emit("你要监听的事件名",要传送的数据)

父组件可以通过this.$children来访问他的所有子元素，子组件可以通过this.$parent来访问他的父组件，根实例的后代可以使用this.$root来访问根实例。  
接下来我们用一个子组件向父组件传值的例子来说明一下组件之间的通信。  
为了方便我们继续在childen.vue中来继续我们的代码。我们需要在子组件中创建一个button标签来 写一个触发事件 ,然后在父组件中监听这个触发事件，代码如下：  
父组件

<template>
        <div>
            <h1>1、组件的引用</h1>
            <h2>我是父组件</h2>
            
            <children msg="hello" :msg1="name"></children>
            
            <p>{
        {message}}</p>
        </div>
    </template>
    
    <script> import children from './children.vue' export default { data(){ return { name:'Masc', message:'' } }, methods:{ }, components: { children }, mounted: function () { this.$on("sendMessage", function (a) { this.message = a; }) } } </script>

子组件：

<template>
        <div>
            <h2>我是子组件（引用）</h2>
            <h2>父子传值（字面量）</h2>
            <p>{
        {msg}}</p>
            <h2>父子传值（动态传值）</h2>
            <p>{
        {msg1}}</p>
            <h2>组件通信（自组件传值给父组件）</h2>
            <button @click="sendParentMessage">给父组件发信息</button>
        </div>
    </template>
    
    <script> export default { props:['msg','msg1'], data(){ return { msg2:"我是子组件传给父组件的值" } }, methods:{ sendParentMessage:function () { //都能实现触发事件 建议使用第二种 //this.$parent.$emit('sendMessage',this.msg2); this.$emit('sendMessage',this.msg2) } } } </script>

当然你也可以通过事件绑定的方式来实现事件监听  
子组件代码不变 父组件代码：

<template>
        <div>
            <h1>1、组件的引用</h1>
            <h2>我是父组件</h2>
            
            
            <children msg="hello" :msg1="name" v-on:sendMessage="sendMessage"></children>
            
            <p>{
        {message}}</p>
        </div>
    </template>
    
    <script> import children from './children.vue' export default { data(){ return { name:'Masc', message:'123' } }, methods:{ sendMessage:function(a){ this.message = a; } }, components: { children }, mounted: function () { // this.$on("sendMessage", function (a) { // this.message = a; // }) } } </script>

这样你就完成了一个通过子组件向父组件发送数据的过程

###### 3、slot 分发内容 ######

在父组件中放入已被 `slot` 标记的内容，这些内容的顺序可以随意。之后这些内容被分发到子组件的特殊元素 `slot` 中，根据 `name` 属性在子组件中重新组合。需要注意的是，内容应该被放在父组件模板中的子组件中  
（1）、我们先创建一个新的子组件 叫 children1.vue 同上面一样 需要在父组件中引入并注册  
父组件向子组件分发内容：  
父组件：

<template>
        <div>
            <h1>1、组件的引用</h1>
            <h2>我是父组件</h2>
            
            
            <children msg="hello" :msg1="name" v-on:sendMessage="sendMessage"></children>
            
            <p>{
        {message}}</p>
            <h2>slot（内容分发）</h2>
            <children1>
                
                <p slot="one">one</p>
                <p slot="two">two</p>
                <p>default</p>
            </children1>
        </div>
    </template>
    
    <script> import children from './children.vue'; import children1 from './children1.vue'; export default { data(){ return { name:'Masc', message:'123' } }, methods:{ sendMessage:function(a){ this.message = a; } }, components:{ children, children1, }, mounted: function () { // this.$on("sendMessage", function (a) { // this.message = a; // }) } } </script>

子组件:

<template>
        <div>
            <h1>内容被分发且重新组合</h1>
            <slot>默认分发处</slot>
            <slot name="two"></slot>
            <slot name="one"></slot>
           
        </div>
    </template>
    <script> export default { data(){ return { } } } </script>

子组件中没有name属性的slot标签 作为默认存放位置，当父组件中的p标签没有被slot标 那么它的内容会自动分发到 默认存放位置。

同样在子组件中定义的数据也可以通过slot传递给父组件  
父组件的代码：

<template>
        <div>
            <h1>1、组件的引用</h1>
            <h2>我是父组件</h2>
            
            
            <children msg="hello" :msg1="name" v-on:sendMessage="sendMessage"></children>
            
            <p>{
        {message}}</p>
            <h2>slot（内容分发）</h2>
            <children1>
                
                <p slot="one">one</p>
                <p slot="two">two</p>
                <p>default</p>
                
                <template slot="nav" slot-scope="props">
                    <li>{
        {props.text}}</li>
                </template>
            </children1>
        </div>
    </template>
    
    <script> import children from './children.vue'; import children1 from './children1.vue'; export default { data(){ return { name:'Masc', message:'123' } }, methods:{ sendMessage:function(a){ this.message = a; } }, components:{ children, children1, }, mounted: function () { // this.$on("sendMessage", function (a) { // this.message = a; // }) } } </script>

子组件：

<template>
        <div>
            <h1>内容被分发且重新组合</h1>
            <slot>默认分发处</slot>
            <slot name="two"></slot>
            <slot name="one"></slot>
            
            <slot name="nav" v-for="nav in navs" :text="nav.li"></slot>
        </div>
    </template>
    <script> export default { data(){ return { navs: [ { li: '琉璃之金' }, { li: '朦胧之森' }, { li: '缥缈之滔' }, { li: '逍遥之火' }, { li: '璀璨之沙' } ], } } } </script>

以上就是组件的引用和传值的全部内容