Vue去哪网学习笔记(2)

最新推荐文章于 2020-11-19 12:44:57 发布

小爱2

最新推荐文章于 2020-11-19 12:44:57 发布

阅读量130

点赞数

分类专栏： vue

vue 专栏收录该内容

7 篇文章

订阅专栏

组件使用的细节点

1.

注意点1. 根据HTML5的规范，tbody里面必须跟tr，否则不能正常解析。
下图中的代码会编译错误，因为tbody后面直接跟了我们定义的模板，而不是tr标签.，那么如何解决这个小"bug"呢？
在这里插入图片描述

解决方案如下：
在tbody标签下面加上tr标签，同时,在tr标签里添加 is 属性来指定我们定义的组件，这样既符合了HTML5规范，又满足了我们的需求，具体做法如下，其中，row是我们自己定义的组件。

加粗样式
再例如在

<ul>
	<li is='组件名'></li>
	<li is='组件名'></li>
</ul>


<select>
	<option is='组件名'></option>
	<option is='组件名'></option>
</select>

注意点2：在子组件定义data的时候，data必须是一个函数，通过函数返回一个对象，而不能直接是一个对象。(因为通过函数返回对象，保证了每个组件里返回对象的独立性)
原因是子组件可能被多次调用，而每调用一次子组件都希望子组件里的数据是独立的，而不是共享的数据。
在这里插入图片描述

注意点3：Vue不建议我们在代码中操作dom，但是在处理一些极其复杂的动画效果时，可以通过ref这个引用来操作节点。
在这里插入图片描述
同理，如果是在组件上写ref这个属性，通过this.$refs.引用名.data里的对象名称来获取数据进行操作。

2. 父子组件传值的更多内容

定义全局组件：

Vue.component ('row', {
	template: '<div></div>',
	data: function() { 

	}
})

定义局部组件

var row = {
	template: '<div>aaaa</div>',
	methods: {
	
   }
}

1. 在父组件向子组件传值的过程中，例如

<counter :count='1'></counter>

<counter count='1'></counter>

上面这两种方式都是可以从父组件向子组件传值的，但是区别是什么呢？
带有:的说明引号后面是JavaScript的表达式，所有向子组件传递的是数字1，而不带冒号的传递的是字符串。

2. Vue中的单向数据流

当父组件传递给子组件数据的过程中，子组件不能够修改父组件传递过来的数值，只能够利用。原因是子组件是被多次利用的，一旦改变了数值，可能会导致其他引用了该子组件的也会被改变。所有Vue里提出来单向数据流的概念。
例如下面这种情况是会报错的，但是能够执行。
在这里插入图片描述

但是我们的需求就是改变传递过来的数值，怎么解决这个问题呢？
方法是：在自己子组件的data里定义一个数据，然后改变自己的数据就可以了。（也就是把父组件传递过来的数值克隆一个副本，然后改变这个副本就可以了。）
如下图所示：
在这里插入图片描述

在子组件向父组件传值的过程中，通过this.$emit(‘change’, 2, 4, 5, …)触发事件的形式，而且可以携带多个参数。

3. 组件参数校验和非props特性

组件参数校验：
把props改成对象形式，而不是数组形式了，如下图所示。
要求传递过来的content必须是Number形式，否则报错。
在这里插入图片描述
如果要求传递过来的数值是字符串或数字呢？可以这样写：

props: {
	content: [Number, String]
}

关于校验的更多高级用法：
require: true 要求必须有传值。
default: ‘default value’ 如果require为false，则默认值为我们自己指定的。
validator:function() { } 校验器，对我们传递的数值进行校验。

在这里插入图片描述
非props特性，就是父组件传递过来的数值子组件不接受，但是也不能使用，还有一点就是content = "hell"会在template模板里的那个div属性上显示。非props特性不常用。

4. 给组件绑定原生事件。

注意：在组件上添加的事件是自定义事件，不是Vue提供的事件。
如下：这个组件上的click 是自定义的事件，一定要理解清楚这里。
在这里插入图片描述

那么如何触发这个组件上的事件呢？
首先，在这个组件的模板上添加一个事件，然后在事件函数里通过this.$emit()往外触发一个事件，而这个事件就是组件上的事件了。

在这里插入图片描述

但是，上面那样做实在太麻烦，那么我能不能在我的自定义组件上添加原生事件呢？
当然可以，方法是在事件后添加一个修饰符，例如：

<child @click.native = "handleClick"></child>

这样就OK了。
如图：
在这里插入图片描述

5. 非父子组件之间的传值问题。

问题如下图所示：
1和2是父子关系，通过我们之前学的props属性可以传值，但是1和3，3和3之间为非父子关系，怎么传值呢？当然可以通过一层一层的传值，但是这样就略显复杂了。那么怎么解决这个问题呢？
在这里插入图片描述
一般来说我们有两种方式解决这种非父子组件之间传值的问题。

Vue提供的数据层的框架Vuex，但是Vuex使用起来比较复杂。
通过总线(Bus/发布订阅模式/观察者模式)方式来解决。

<div id="app">
    <child contnet="aaaa"></child>
    <child contnet="bbbb"></child>
</div>
<script>
    Vue.prototype.bus=new Vue();
    Vue.component("child",{
        data:function(){
            selfcontent:this.content
        },
        props:{
            content:String
        },
        template:'<div @click="handelclick">{{selfcontent}}</div>',
        methods:{
            handelclick:function(){
                this.bus.$emit('change',this.selfcontent)
            }
        },
        mounted:function(){
            var this_=this
            this.bus.$on('change',function(msg){
                this_.selfcontent=msg
            })
        }
    })
    var vm=new Vue({
        el:"#app",
    })
</script>