Vue之组件及组件通信
程序员文章站
2022-05-09 17:57:58
组件之全局组件 //注意:需要在Vue实例化之前注册全局组件,使用Vue.component("组件名",{ template: }) Vue.component("show name",{ template:` ViavaCos ` }) var vm = new Vue({ el:' app', ......
组件之全局组件
//注意:需要在vue实例化之前注册全局组件,使用vue.component("组件名",{ template:`组件模板` }) vue.component("show-name",{ template:` <div title="注意, 组件模板的根元素必须有且只有一个"> <p>viavacos</p> </div> ` }) var vm = new vue({ el:'#app', data:{ name:'viavacos' }, methods:{} })
组件之局部组件
// 套路和全局组件一样,这两者只是注册的位置不同,作用的范围也不一样罢了 使用components选项来注册局部 var vm = new vue({ el:'#app', data:{}, components:{ 'show-name':{ template:` <div title="注意, 组件模板的根元素必须有且只有一个"> <p>viavacos</p> </div> ` } } })
组件通信之父组件传递值给子组件
// 父组件传递值给子组件通过自定义属性传递,然后子组件通过porps选项来接收所传递过来的值
一共三个步骤:
- 在子组件的自定义标签上设置自定义属性,值为父组件需要从传递的值(变量)
- 在子组件的实例上设置一个叫props的属性,用来接收父组件传递过来的值,props选项是一个字符串数组
-
由于props选项也被vue实例代理了,所以直接在当前子组件实例中使用this.自定义属性名就可使用了
<div id="app"> // 1. 设置自定义属性 <show-city :city="city"></show-city> </div> <script src="./vue.js"></script> <script> var vm = new vue({ el: '#app', data: { city: ["北京", "上海", "天津"] }, methods: {}, components: { 'show-city': { // 3.使用 template: ` <div> <p v-for="item in city">{{item}}</p> </div> `, // 2.接收值 props: ['city'] } } }); </script>
组件通信之子组件传递给父组件
一共五个步骤:
- 在子组件的组件模板上设置一个点击事件,用来触发自定义事件用于传值
- 在子组件的methods中设置点击事件的事件处理程序:内容为执行自定义事件this.$emit("自定义事件名", 若干个参数)
- 在父组件管理的视图,也就是书写子组件的自定义标签的地方,在这个标签上设置自定义事件的监听(用v-on指令就行)
- 提前在父组件的数据对象data中定义一个容器来接收子组件传递过来的值
-
在父组件的methods中设置监听自定义事件的事件处理程序:由于事件触发了,会有写好的若干个参数传递过来,所以在这里处理一下。将传递来的值用方才定义好的容器接收,然后就可以放心使用这个子组件传递来的值了
<div id="app"> <!-- 3. 监听事件 --> <show-city @getcity='execity' v-for="item in city" :city="item" :tcity="tcity"></show-city> </div> <script src="./vue.js"></script> <script> var vm = new vue({ el: '#app', data: { city: ["北京", "上海", "天津"], // 4. 定义容器接收 tcity: '' }, methods: { // 5. 赋值给tcity这个容器 execity(data) { this.tcity = data; } }, components: { 'show-city': { // 1. 设置自定义事件 template: ` <div> <p @click="tofather" :class="{select:isselect}" >{{city}}</p> <input text="text" v-model="isselect"> </div> `, props: ['city', 'tcity'], methods: { tofather() { // 2. 触发自定义事件 console.log('被点击了') this.$emit('getcity', this.city); }, }, computed: { isselect() { return this.city === this.tcity; } } } } }); </script>