Vue2.0笔记——组件2

Posted 2020-11-01

组件组合

---

父子组件的通信

组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。

---

首先，需要在Vue实例里定义一个组件，设置data，然后在这个组件里再添加一个conponents选项，注意不要添错位置。
示例:

<div id="app">
    <my-father></my-father>
</div>
//父组件的模板
<template id="fatherTl">
    <div>
        <p>这是父组件</p>
        <p>访问父组件数据:{{name}},{{age}},姓名:{{user.name}},年龄:{{user.age}}</p>
        <my-child></my-child>
    </div>
</template>
//子组件的模板
<template id="childTl">
    <div>
        <p>这是子组件</p>
        <p>访问子组件数据:性别:{{sex}},身高:{{height}}</p>
    </div>
</template>

var vm = new Vue({
    el:‘#app‘,
    components:{
        ‘my-father‘:{
            template:‘#fatherTl‘,
            data:function(){
                return {
                    name:‘Xiao‘,
                    age:19,
                    user:{name:‘小幂幂‘,age:31}
                }
            },
            components:{
                ‘my-child‘:{
                    template:‘#childTl‘,
                    data:function(){
                        return {
                            height:166,
                            sex:‘Female‘
                        }
                    }
                }
            }
        }
    }
});

作为子组件my-child，<my-child></my-child>标签应放在父组件标签<my-father></my-father>标签内，而不能是实例挂载元素下。
如果你尝试直接在父组件模板或子组件模板中通过{{}}模板语法引用则会出现错误。
运行此案例，完美运行,你可以通过vue-devtool查看组件结构图。
目前还没有通信，只是显示了一下各自的数据，接下来传递数据了。

父向子传递数据

父向子传递数据，我们需要做的就是将要传递的数据绑定到子组件的标签上，并在子组件内通过props选项来接收。

//father模板中添加
<my-child :childName="user.name" :age="user.age"></my-child>
//接着，在my-child组件中添加选项
props:[‘childName‘,‘age‘]
//最后，我们引用name和age
//my-child模板中
<div>
    <p>这是子组件</p>
    <p>访问子组件数据:性别:{{sex}},身高:{{height}}</p>
    <p>访问父组件数据:{{childName}},{{age}}</p>//添加了这一条
</div>

接下来访问，即可看到数据显示了。
分析一下,：name和：age，这个冒号“：”后的name和age，就是，props中接收的属性名，将作为子组件的属性名，就是说这两个名可以改，无论改成什么，最后都需要通过这个名字访问。
而属性值就是引号中的user.name,user.age，它直接也是父组件的属性名。

子向父传递数据

子向父传递书序需要通过事件的方式向上传递数据。要做的就是通过$emit方法触发事件，并添加附加参数(就是属性)，通过事件传递数据,父组件中的事件方法接收这参数即可。
示例:

//my-child模板中定义一个按钮，作为媒介，用来触发
<button @click="send">向上传递给父组件数据</button>
//组组件定义
methods:{
    send(){
        this.$emit(‘child-up‘,this.sex,this.height);
    }
}
//my-father组件模板中监听这个事件
<my-child :name="user.name" :age="user.age"  @child-up="getData"></my-child>
//所以你需要在my-father组件中定义这个getData方法来接收
//但你需注意，你必须提前初始化这些属性
methods:{
    getData(sex,height){
        this.sex=sex;
        this.height=height;
    }
}
//myfather模板中
<h3>访问子组件数据,{{sex}},{{height}}</h3>

这样，通过某个媒介(点击或其他方式)作为触发事件的方式，来传递数据，并在该实例处监听该事件，并接收数据。
此处将监听在my-child标签中，因my-chlid标签作为myfather标签的子组件，所以将getData方法定义在父组件methods中。

---

单向数据流

props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

接下来我们想试着修改父组件内属性的值，看看是不是会跟着修改,且如果修改prop中属性是否会出现错误。
示例:
代码较多，我们再新建一个html。我们只注册使用一个组件，因为Vue实例本身也是一个组件，它是根组件，所以在实例中components中注册一个组件作为子组件。

<div id="app">
    <p>父组件:{{age}}</p>
    <p><input type="text" v-model="name"></p>
    <hr/>
    <my-component :username="name" :age="age"></my-component>
</div>

<template id="templ">
    <p>子组件中父组件的数据,{{username}}</p>
</template>

var vm = new Vue({
    el:‘#app‘,
    data:{
        name:‘XiaoYao‘,
        age:19
    },
    components:{
        ‘my-component‘:{
            template:‘#templ‘,
            props:[‘username‘,‘age‘]
        }
    }
});

我们已经通过props属性进行向下传递数据了，父组件中我们把name属性设置为双向绑定的属性，以便于修改。
接下来直接在文本框中修改name的值，子组件模板中，值就跟着变了。

那么，我们开始尝试着修改它。
示例:

//在组件模板中添加如下按钮。注意模板中只有一个根元素，需要div包起来
<button @click="change">直接修改父组件传递下来的值</button>

//在子组件中定义方法，注意不要写错位置，会发生错误的
methods:{
    change(){
        this.username=‘I Love You‘;//直接修改它的值
    }
}

运行结果，浏览器控制台发生异常了。

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop‘s value. Prop being mutated: "username"

由此可见，它是不可以更改的，因为它是自动更新值的。

如果你很需要在子组件中修改它的话

当然如果非要这么做的话，也还是有方法的，因为你很有必要用它。

• 你可能希望把它当做局部变量处理
• 你可能需要得到它的值显示出来，并修改它

那么你有两种选择，

• 一种是定义局部变量，来操作它。
• 另一种就是定义计算属性，依据原值的修改来动态的改变这个计算属性，而你使用的就是这个计算属性

接下来我们只需要这样：

//1.添加属性，并将传来的属性复制给新的局部定义属性
data:function(){
    return {
        myName:this.username
    }
}
//2.接下来要改变和使用的值就都是myName了
methods:{
    change(){
        this.myName=‘I Love you‘
    }
}
//模板中
<p>子组件中父组件的数据,{{myName}}</p>

对于使用计算属性，我们可以做:

props: [‘size‘],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}
//接下来就是使用normalizedSize属性显示了

以上是单项数据流的问题，如果需要双向呢，看下面。

---

双向数据流，父子双向绑定

我们使用.sync修饰符,该修饰符在1.0中使用，在2.0中废除，后又在2.3中重新引用，只是错了稍加修改，具体情况看官网。

//父组件向下传递时，子组件标签上传递的属性后面添加.sync修饰符
<my-component :username.sync="name" :age="age"></my-component>

然后需要显式的触发一个更新事件。

methods:{
    change(){
        this.$emit(‘update:username‘, ‘I Love You‘);
        //this.username=‘I Love you‘;
    }
}

通过$emit事件方法，然后第一个参数，update：是固定写法，后面是新属性值，这样就可以双向绑定了。使用按钮触发不是必需的，只要在某处调用这个触发方法即可。

假如你向下传递的是对象，那么如果要修改的话会更方便。

我们可以直接修改对象的属性值而不需要.sync修饰符。

//为父组件定义一个对象,并且显示他
emp:{salary:6000,workingAge:2,name:‘XiaoChenchen‘}
<p>父组件emp:{{emp}}</p>

//在单击按钮方法中直接设置对象的属性值
this.emp.salary=8000;

单击按钮，发现salarys从6000变成了8000，而且不会不会发生任何错误。
这是因为对象的引用地址没有发生改变，改变的只是里面的属性，属性改变并不会影响对象地址。

所以我们建议封装成对象更方便，但有时也是需要到.sync修饰符的，主要是看情况了。

谢谢观看，下节继续讲组件，非父子间通信，以及slot插槽分发。

---

爱自己，更爱需要爱的人。。。