Vue1.0父子组件之间的通讯

前言

为一个vue初学者不得不了解的就是组件间的数据通信(暂且不谈vuex)。通信方式根据组件之间的关系有不同之处

首先排至webpack文件

在这里我在根目录下创建了webpack.config.js的文件

const pathlib=requrie("path");
module.exports=function(env,args){
			env=env||{};
			return {
				entry:'./src/main.js',
				module:{
					rules:[
								{test:/\.css$/,use:['style-loader','css-loader']}
						]
				},
				resolve:{
					alias:{
							'vue':'vue/dist/vue.esm.js'
						}
				},
				...env.development?require('./config/webpack.development'):require('./config/webpack.production')
		}
}

之所以需要这样配置，是因为为了同时在开发版本和生产版本同时测试，
所以我的config文件夹里面就应该放两个文件webpack.development.js和webpack.production.js

//webpack.development.js
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
		mode:'development',
		output:{
				filename:'bundle.js'
		},
		plugins:[
				new htmlWebpackPlugin({
						template:'index.html'          	//我的根目录里面会有一个index.html作为呈现内容的容器
				})
		]
}

//webpack.production.js
const pathlib=require('path');
const htmlWebpackPlugin=require('html-webpack-plugin');
modele.exports={
		mode:'production',
		output:{
				path:pathlib.reslove(__dirname,'build'),
				filename:'bundle.js'
		},
		plugins:[
        new htmlWebpackPlugin({
            template:'index.html'
        })
    ]
}

有了这两个文件再加上webpack.config.js中的…env.development?require(’./config/webpack.development’):require(’./config/webpack.production’)这句代码就能随时随地的在开发版本和生产版本中切换使用了。

然后就是我们的vue组件之间的数据传递了

父–>子

首先我们的parent.js文件如下
我们要做的效果就是点一下+1按钮子级的数据就+1

import Vue from 'vue';
import child from './child.js';
export defaule Vue.component('parent',{
		template:`
				<div>
						<div>父级<button @click="add()">+1</button></div>
						<child :parent="this"></child>			//用来给子组件建立连接从而把数据传递过去
				</div>
		`,
		methods:{
				add(){
						this.num++;
				}
		}
		
})

<child :parent="this"></child>    //我们用v-bind 把this(就是整个父组件)这个组件通过parent属性传给子组件

那么子组件也应该接受一下，一下child.js如下

import Vue from 'vue';
export default Vue.component('child',{
		props:['parent'],     //props来接受刚才的父级传来的数据
		template:`
				<div>
						<div>子级：{{parent.num}}</div>
				</div>
		`
});

这样一来我们点击+1按钮子级的数据就会＋1，从而实现了父向子传递数据。

子–>父

父组件代码如下

import Vue from 'vue';
import child from './child';
export default Vue.component('parent',{
    data() {
        return {
            msg:0
        }
    },
    template:`
        <div>
            <div>父级<button @click="add()">+{{msg}}</button></div>
            <child ref="c1"></child>
        </div>
    `,
    methods: {
        add(){
            //console.log(this.$refs.c1.num);
            this.msg=this.$refs.c1.num++;
        }
    },
})

子组件代码如下

import Vue from 'vue';

export default Vue.component('child',{
    data() {
        return {
            num:1
        }
    },
    template:`
        <div>
            <div>子级:{{num}}</div>
            
        </div>
    `,
    
})

这里用到了ref=“c1” 这是用来获取子组件的一种方式，所以直接点击+1按钮就可以让msg里面的数据+1了，这就是子组件向父组件传递数据。