Vue中在父组件中定义子组件与父子组件间传值

男娘i 2022-04-22 07:50 107阅读 0赞

### 文章目录 ###

*  在父组件中定义子组件
 *   *  示例
     *   *  源码
         *  结果
         *  分析
 *  父组件向子组件传值
 *   *  示例
     *   *  源码
         *  结果
         *  分析
 *  子组件向父组件传值
 *   *  示例
     *   *  源码：
         *  结果
         *  分析

# 在父组件中定义子组件 #

我们除了定义独立的组件之外，`Vue`还支持在父组件中定义子组件。

## 示例 ##

### 源码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件</title>
    </head>
    <body>
        <template id="parent">
            <h1>父组件</h1> <children></children>
        </template>
        <template id="children">
            <h2>子组件</h2>
        </template>
        <div id="app">
            <parent></parent>
        </div>
    <script src="../../../js/vue/vue/1.0/vue.js"></script>
    <script type="application/javascript">
        //定义父组件
        Vue.component('parent',{
            template:'#parent'
            //在父组件中定义子组件
            ,components:{
                'children':{
                    template:'#children'
                }
            }
        });
        new Vue({
            el:'#app'
        });
    </script>
    </body>
    </html>

### 结果 ###

![在这里插入图片描述][20181103162652201.png]

### 分析 ###

如上面所示，我们在父组件`parent`中定义子组件`children`，由于子组件`children`是在父组件中定义的，所以说要想使用子组件，则子组件`<children></children>`必须在父组件中使用，不能在父组件之外的地方使用。

# 父组件向子组件传值 #

在项目开发中，随着我们定义的组件越来越多，也就越来越多的涉及到组件间传值的情况，我这里主要是讲解父组件向子组件传值的情况。

## 示例 ##

### 源码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件</title>
    </head>
    <body>
        <template id="parent">
            <h1>父组件:传值id={
       {id}}</h1> <children :id="id"></children>
        </template>
        <template id="children">
            <h2>子组件:接收id={
       {id}}</h2>
        </template>
        <div id="app">
            <parent></parent>
        </div>
    <script src="../../../js/vue/vue/1.0/vue.js"></script>
    <script type="application/javascript">
        //定义父组件
        Vue.component('parent',{
            template:'#parent'
            ,data(){
                return {
                    id:10
                }
            }
            //在父组件中定义子组件
            ,components:{
                'children':{
                    props:['id']
                    ,template:'#children'
                }
            }
        });
        new Vue({
            el:'#app'
        });
    </script>
    </body>
    </html>

### 结果 ###

![在这里插入图片描述][20181103164025588.png]

### 分析 ###

上图中实现的功能是在父组件中向子组件进行传值，其传递的`id`值为`10`。这需要我们在父组件的数据域中定义一个`id:10`，这里需要注意的是，为了将组件间的数据域进行隔离，这里的`data`参数后面跟的不是对象，而是函数，用该函数返回一个对象，以此来实现组件间数据的隔离。

我们在用父组件给子组件传值时，是在父组件用到子组件的地方，在这里添加`:id="id"`，此时第二个`id`中的值指的就是父组件数据域中的`id`值，而其`:id`，指的就是子组件中的`props:['id']`中的`id`，这样我们就将父组件中的`id`值成功的传递给了子组件中的`props:['id']`中的`id`中，而我们在子组件中使用该值时，直接用`{ {id}}`去取值就可以了。

# 子组件向父组件传值 #

在项目开发中，我们还会经常用到子组件给父组件传值的情况，比如说下面的示例就是如此。

## 示例 ##

### 源码： ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件</title>
    </head>
    <body>
        <template id="parent">
            <h1>父组件：接收信息 {
       {message}}</h1>
            <children @:message="getData"></children>
        </template>
        <template id="children">
            <h2>子组件：发送信息 {
       {hello}}</h2>
            <button @click="sendData">发送数据</button>
        </template>
        <div id="app">
            <parent></parent>
        </div>
    <script src="../../../js/vue/vue/1.0/vue.js"></script>
    <script type="application/javascript">
        //定义父组件
        Vue.component('parent',{
            template:'#parent'
            ,data(){
                return {
                    message:''
                }
            }
            ,methods:{
                getData(val){
                    //父组件展示子组件发送来的信息
                    this.message = val;
                }
            }
            //在父组件中定义子组件
            ,components:{
                'children':{
                    template:'#children'
                    ,data(){
                        return {
                            hello:''
                        }
                    }
                    ,methods:{
                        //子组件发送信息
                        sendData(){
                            //子组件展示发送的信息
                            this.hello = 'Hello !';
                            //子组件发送信息
                            this.$emit('message',this.hello);
                        }
                    }
                }
            }
        });
        new Vue({
            el:'#app'
        });
    </script>
    </body>
    </html>

### 结果 ###

![在这里插入图片描述][20181103171307567.png]

### 分析 ###

在上面的代码中实现的功能是通过在子组件中点击发送信息按钮，在子组件中的信息就被父组件接收和展示了出来。

我们在子组件的数据域中定义了一个空的`hello`，通过点击子组件的发送信息按钮，其按钮绑定的事件`sendData`就会在子组件的方法域中查找并执行`sendData()`。

该`sendData()`方法执行了两个操作，其一是将子组件发送的信息展示在子组件面板中，其二是触发一个`$emit`事件发送，其发送的`key`为`message`，其值为赋值后的`hello`，也就是说是`Hello !`。

由于`message`被注册到了父组件引用子组件的`@:message`中，其值调用的则是父组件中的`getData`方法，因而其会在父组件中的方法域中查找并执行`getData(val)`方法，而该方法中的`val`即为父组件接收的子组件中的信息。而该信息又被赋值给了父组件数据域中的`message`，所以，最终在父组件中就会展示出子组件发送来的信息`Hello !`。

[20181103162652201.png]: /images/20220422/c29b8453121a4f2abe61b9bac8b2c318.png
[20181103164025588.png]: /images/20220422/7a87365afb97460abb311e23ae50e132.png
[20181103171307567.png]: /images/20220422/0de1a1a288b74bb789ea5d5d4060a804.png